Add React lifecycle page

Author: RoyalIcing

lib/components_guide_web/controllers/react_typescript_controller.ex

@@ -8,6 +8,7 @@ defmodule ComponentsGuideWeb.ReactTypescriptController do
   end
 
   @articles %{
+    "lifecycle" => %{title: "React Lifecycle"},
     "testing" => %{title: "Testing React"},
     "forms" => %{title: "Creating Forms in React"},
     "state-levels" => %{title: "Levels of State in React"},

lib/components_guide_web/templates/react_typescript/_nav.html.heex

@@ -3,6 +3,7 @@
   <ul class="text-xl" data-links="block p-2 current-page-bold">
     <li><%= link(@conn, "Fundamentals", to: "/react+typescript") %></li>
     <li><%= link(@conn, "Testing", to: "/react+typescript/testing") %></li>
+    <li><%= link(@conn, "Lifecycle", to: "/react+typescript/lifecycle") %></li>
     <li><%= link(@conn, "Reducer Patterns", to: "/react+typescript/reducer-patterns") %></li>
     <li><%= link(@conn, "Form Reducers", to: "/react+typescript/form-reducers") %></li>
     <li><%= link(@conn, "Zero Hook Dependencies", to: "/react+typescript/zero-hook-dependencies") %></li>

lib/components_guide_web/templates/react_typescript/hooks-concurrent-world.html.md

@@ -1,13 +1,13 @@
 # Understanding React Hooks in a Concurrent World
 
 - `useId`: generate a unique value consistently on the server & browser side, usually for `id` attributes.
+- `useState` & `useReducer`: holds data that can be changed @ any time.
+- `useSyncExternalStore`: subscribes to an external source of data.
 - `useMemo` & `useCallback`: recalculate output when inputs change @ render time.
-- `useDeferredValue`: recalculate output to be input when any urgent updates have been committed.
-- `useState`: recalculate output when called @ render time.
-- `useReducer`: recalculate output when called @ any time.
+- `useContext`: subscribes to data provided by another component further up the tree.
+- `useDeferredValue`: forks a piece of state, rendering in the background until suspended components have loaded, rendering previous state in the meanwhile.
 - `useEffect`: executed by React when inputs change @ commit time.
-- `useContext`: state external to this component provided by another component further up the tree.
-- `useRef`: mutable reference that can be changed @ any time.
+- `useRef`: holds unsafe data that can be changed @ any time.
 - [View Official Hooks Reference](https://reactjs.org/docs/hooks-reference.html)
 
 ## Parallel-Universe-Safe

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

@@ -0,0 +1,46 @@
+# React Lifecycle
+
+1. Initial render.
+2. Initial DOM is created.
+3. Browser performs layout and repainting.
+4. External event occurs (e.g. user interaction, promise completes).
+5. State changes.
+6. Component subtree is rendered.
+7. UI differences are applied to DOM.
+8. Browser performs layout and repainting.
+
+## Client-only
+
+1. Initial render:
+    1. Calls root component (e.g. `App`) to get its returned elements.
+    2. Iterates through elements and calls their components, and so on, until we have all leaf elements that represent HTML elements.
+    3. Creates DOM elements for each leaf React element, and inserts them on the page.
+    4. Runs `useLayoutEffect` callbacks.
+    5. Browser performs layout and repainting.
+    6. Runs `useEffect` callbacks.
+2. A component within the tree changes state:
+    1. Schedules update.
+    2. Update starts.
+    3. Calls the changed component to get its returned elements.
+    4. Iterates through elements and calls their components, and so on, until we have all leaf elements that represent HTML elements.
+    5. Compares the new leaf elements to the previously committed leaf elements.
+    6. Updates/replaces/removes DOM elements for each leaf React element.
+    7. Runs `useLayoutEffect` callbacks.
+    8. Browser performs layout and repainting.
+    9. Runs `useEffect` callbacks.
+
+## Not included (yet?)
+
+- Hydration from server to client rendering
+- Suspense
+- `useDeferredValue`
+- React Server Components
+- Server streaming
+
+## Next.js
+
+## Example
+
+```jsx
+
+```