Add Idempotent JavaScript Operations

Author: RoyalIcing

lib/components_guide_web/controllers/web_standards_controller.ex

@@ -6,7 +6,7 @@ defmodule ComponentsGuideWeb.WebStandardsController do
     render(conn, "index.html", article: "intro")
   end
 
-  @articles ["url", "promise", "http-caching", "html", "http-headers"]
+  @articles ["url", "promise", "http-caching", "html", "http-headers", "idempotent-javascript-operations"]
 
   def show(conn, %{"id" => article}) when article in @articles do
     render(conn, "index.html", article: article)

lib/components_guide_web/templates/react_typescript/testing.html.md

@@ -343,7 +343,7 @@ getByRole('img', { name: 'New document' });
 
 ## Use accessible names
 
-<table style="width: 100%; text-align: left;">
+<table>
   <thead>
     <tr>
       <th>Role name</th>

lib/components_guide_web/templates/react_typescript/zero-hook-dependencies.html.md

@@ -0,0 +1,23 @@
+# Zero Hook Dependencies
+# Opinionated React Hooks
+
+## Don’t pass dependencies to `useEffect`
+
+Before:
+
+```js
+useEffect(() => {
+  performSearch(searchQuery);
+}, [searchQuery]);
+```
+
+After:
+
+```js
+useEffect(() => {
+  // Use an idempotent operation which can be requested multiple times safely.
+  performSearch(searchQuery);
+});
+```
+
+## Don’t `useRef` for state