Add new robust javascript section

Author: RoyalIcing

lib/components_guide_web/controllers/react_typescript_controller.ex

@@ -11,6 +11,7 @@ defmodule ComponentsGuideWeb.ReactTypescriptController do
     "testing" => %{title: "Testing React"},
     "forms" => %{title: "Creating Forms in React"},
     "reducer-patterns" => %{title: "React Reducer Patterns"},
+    "zero-hook-dependencies" => %{title: "Zero Hook Dependencies"},
     "hooks-concurrent-world" => %{title: "React Hooks in a Concurrent World"},
     "logical-clocks" => %{title: "Logical Clocks in React"},
     "editor" => %{title: "React Online Editor"},

lib/components_guide_web/controllers/robust_javascript_interactivity_controller.ex

@@ -0,0 +1,28 @@
+defmodule ComponentsGuideWeb.RobustJavascriptInteractivityController do
+  use ComponentsGuideWeb, :controller
+  require Logger
+
+  def index(conn, _params) do
+    render(conn, "index.html", article: "intro")
+  end
+
+  @articles ["idempotent-javascript-operations"]
+
+  def show(conn, %{"id" => article}) when article in @articles do
+    render(conn, "index.html", article: article)
+  end
+
+  def show(conn, _params) do
+    raise Phoenix.Router.NoRouteError, conn: conn, router: ComponentsGuideWeb.Router
+  end
+end
+
+defmodule ComponentsGuideWeb.RobustJavascriptInteractivityView do
+  use ComponentsGuideWeb, :view
+  use ComponentsGuideWeb.Snippets
+  alias ComponentsGuideWeb.ThemeView
+
+  def header_styles() do
+    ThemeView.banner_styles(:web_standards)
+  end
+end

lib/components_guide_web/router.ex

@@ -46,6 +46,12 @@ defmodule ComponentsGuideWeb.Router do
       only: [:index, :show]
     )
 
+    resources(
+      "/robust-javascript",
+      RobustJavascriptInteractivityController,
+      only: [:index, :show]
+    )
+
     resources(
       "/graphics",
       GraphicsController,

lib/components_guide_web/templates/landing/index.html.eex

@@ -49,6 +49,7 @@ subhead = "Get better at accessibility, TDD, BDD, naming, performance, and the l
 
 <%= subject_banner(:accessibility_first) %>
 <%= subject_banner(:react_typescript) %>
+<%= subject_banner(:robust_javascript_interactivity) %>
 <%= subject_banner(:web_standards) %>
 <%= subject_banner(:composable_systems) %>
 

lib/components_guide_web/templates/react_typescript/_top.html.eex

@@ -12,6 +12,7 @@
       <li><%= link("Fundamentals", to: '/react+typescript') %>
       <li><%= link("Testing", to: '/react+typescript/testing') %>
       <li><%= link("Reducer Patterns", to: '/react+typescript/reducer-patterns') %>
+      <li><%= link("Zero Hook Dependencies", to: '/react+typescript/zero-hook-dependencies') %>
       <li><%= link("Hooks in a Concurrent World", to: '/react+typescript/hooks-concurrent-world') %>
       <li hidden><%= link("Event Handlers", to: '/react+typescript/event-handlers') %>
       <li><%= link("Logical Clocks", to: '/react+typescript/logical-clocks') %>

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

@@ -1,5 +1,6 @@
-# Zero Hook Dependencies
-# Opinionated React Hooks
+# The pain of useEffect’s dependencies
+
+`useEffect` dependencies considered painful.
 
 ## Don’t pass dependencies to `useEffect`
 
@@ -20,4 +21,61 @@ useEffect(() => {
 });
 ```
 
+Summary:
+- Change your React effects [to be idempotent](/robust-javascript/idempotent-javascript-operations), which means they can be called as multiple times safely.
+- Adding a dependency means both 1. I want to read this value 2. I want to run *when* this value changes. It’s conflating two responsibilities. Removing the dependencies means you can read *any* value, and the when is taken care of with idempotency.
+
+It can seem like hook dependencies are similar to passed props in React: you simply declare what you want to use, and React works out what has changed and skips work if there are no changes. However, there’s one huge difference. React’s changes to the DOM are inert: if React accidentally set a DOM element’s attribute to the same value it already has, there’s no behaviour difference. It’s just slightly inefficient. But if React calls your effect more times than you expected, then that’s changing behaviour. (That’s why the StrictMode double firing effects has been so disruptive) What we have to do is make it as safe as setting an attribute, and we can do that with idempotency.
+
+## Example: autosave
+
+Before:
+
+- `useEffect` has 3 dependencies.
+- React will diff dependencies to see what has changed.
+- _May_ run after committing if any of the 3 dependencies change.
+
+```js
+const fetcher = useFetcher();
+const queryToSave = useDebouncedMemo(() => query.clock === 0 ? null : query, 1000, [query]);
+useEffect(() => {
+  if (queryToSave === null) {
+    return;
+  }
+
+  fetcher.submit(queryToSave.searchParams, { method: "post" })
+}, [fetcher.submit, projectID, queryToSave]);
+```
+
+After:
+
+- `useEffect` has zero dependencies.
+- Runs after committing.
+- We do our own check to see what has changed, and whether we should bail or procede.
+
+```js
+const fetcherLastValues = new WeakMap();
+
+const fetcher = useFetcher();
+useEffect(() => {
+  if (queryToSave === null) {
+    return;
+  }
+
+  const key = queryToSave.searchParams.toString();
+  if (key === fetcherLastValues.get(fetcher)) {
+    return;
+  }
+  fetcherLastValues.set(fetcher, key);
+
+  fetcher.submit(queryToSave.searchParams, { method: "post" })
+});
+```
+
+## Bonus: what if it errors?
+
+## Bonus: aborting earlier requests
+
+
+
 ## Don’t `useRef` for state

lib/components_guide_web/templates/robust_javascript_interactivity/_header.html.eex

@@ -0,0 +1,3 @@
+<header style="<%= header_styles() %>">
+  <%= render ComponentsGuideWeb.RobustJavascriptInteractivityView, "_top.html" %>
+</header>

lib/components_guide_web/templates/robust_javascript_interactivity/_nav.html.eex

@@ -0,0 +1,6 @@
+<nav class="pt-6 pb-4">
+  <ul y-y x-x=md class="text-lg font-bold text-shadow" data-links="p-3">
+    <li><%= link("What goes wrong?", to: '/robust-javascript') %>
+    <li><%= link("Idempotency", to: '/robust-javascript/idempotent-javascript-operations') %>
+  </ul>
+</nav>

lib/components_guide_web/templates/robust_javascript_interactivity/_top.html.eex

@@ -0,0 +1,7 @@
+<div class="mx-auto max-w-4xl text-white">
+  <h1 y-y x-x=md class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
+    <span class="mr-1 text-5xl">🫵🏾🔨</span>
+    <span><%= "Robust JavaScript Interactivity" %></span>
+  </h1>
+  <%= render ComponentsGuideWeb.RobustJavascriptInteractivityView, "_nav.html" %>
+</div>