New react articles :)

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/controllers/react_typescript_controller.ex

@@ -7,7 +7,7 @@ defmodule ComponentsGuideWeb.ReactTypescriptController do
     |> render("index.html", article: "tips")
   end
 
-  @articles ["testing", "forms"]
+  @articles ["testing", "forms", "event-handlers", "logical-clocks"]
 
   def show(conn, %{"article" => article}) when article in @articles do
     render(conn, "index.html", article: article)

apps/components_guide_web/lib/components_guide_web/templates/layout/_contentinfo.html.eex

@@ -1,4 +1,4 @@
-<footer role="contentinfo" class="container pt-8 pb-6 text-gray-500 border-t border-gray-800 tracking-wide">
+<footer role="contentinfo" class="container pt-16 pb-6 text-gray-500 border-t border-gray-800 tracking-wide">
   <div class="text-center text-xl text-white" style="--link-decoration: underline">
     Follow <a href="https://twitter.com/ComponentsGuide">@ComponentsGuide</a> on Twitter for the latest articles.
   </div>

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

@@ -11,6 +11,8 @@
     <ul y-y x-x=md class="text-lg list-none font-bold" data-links="p-3">
       <li><%= link("Fundamentals", to: '/react+typescript') %>
       <li><%= link("Testing", to: '/react+typescript/testing') %>
+      <li><%= link("Event Handlers", to: '/react+typescript/event-handlers') %>
+      <li><%= link("Logical Clocks", to: '/react+typescript/logical-clocks') %>
       <li><%= link("Forms", to: '/react+typescript/forms') %>
     </ul>
   </nav>

apps/components_guide_web/lib/components_guide_web/templates/react_typescript/event-handlers.html.md

@@ -0,0 +1,91 @@
+# React Event Handlers
+
+## Deciding whether to control a form element
+
+- A controlled element lets you have **full control** over its value.
+- An uncontrolled element can let you handle events with less code.
+
+## Controlled form elements
+
+- We store the state for each field using `useState`.
+- We must set the current `value` of the input when rendering.
+- We must listen to when the user changes using `onChange` on each input, and update our state.
+- We can then read our state when the form is submitted.
+
+```tsx
+import React, { useState } from "react";
+import authService from "../services/auth";
+
+function SignInForm() {
+  const [email, updateEmail] = useState("");
+  const [password, updatePassword] = useState("");
+
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault(); // Prevent performing normal submission
+        // Could validate here.
+        authService.signIn({ email, password });
+      }}
+    >
+      <label>
+        Email
+        <input
+          type="email"
+          value={email}
+          onChange={(event) => {
+            updateEmail(event.target.value);
+          }}
+        />
+      </label>
+      <label>
+        Password
+        <input
+          type="password"
+          value={password}
+          onChange={(event) => {
+            updatePassword(event.target.value);
+          }}
+        />
+      </label>
+      <button type="submit">Sign In</button>
+    </form>
+  );
+}
+```
+
+## Uncontrolled form elements
+
+- We have no state — the input itself holds the state.
+- We could set an initial value using `defaultValue`.
+- We don’t have to listen to any change events.
+- We can then read from the form using the DOM when it is submitted.
+
+```tsx
+import React, { useState } from "react";
+import authService from "../services/auth";
+
+function SignInForm() {
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault(); // Prevent performing normal submission
+        const email = event.target.elements.email.value;
+        const password = event.target.elements.password.value;
+        // Could validate here.
+        authService.signIn({ email, password });
+      }}
+    >
+      <label>
+        Email
+        <input type="email" name="email" />
+      </label>
+      <label>
+        Password
+        <input type="password" name="password" />
+      </label>
+      <button type="submit">Sign In</button>
+    </form>
+  );
+}
+```

apps/components_guide_web/lib/components_guide_web/templates/react_typescript/logical-clocks.html.md

@@ -0,0 +1,39 @@
+# Simplify React Effects with Logical Clocks
+
+## Problems
+
+Hooks offer a more flexible and powerful suite of tools than we had a few years ago in React with class components’ lifecycle methods.
+
+Each hook tries to follow the unix philosophy: have small tools that solve one particular task well. For example, `useState()` solves many needs for a mutable variable that belongs to a component.
+
+However, while React has certainly made the *what* easier with the declarative model of building a view, getting the *when* right proves to be a lot harder. Hooks like `useEffect()` can appear simple but are difficult to compose together and to visualise. By using logical clocks, we can get back towards the declarative model that we all love in React.
+
+## What is a logical clock?
+
+```ts
+function useTick() {
+  return useReducer(n => n + 1, 0);
+}
+```
+
+## Debouncing
+
+```ts
+export function useDebouncer(duration: number): readonly [number, EffectCallback] {
+  const [count, tick] = useTick();
+  const effect = useCallback(() => {
+    const timeout = setTimeout(tick, duration);
+    return () => clearTimeout(timeout);
+  }, [duration, tick]);
+
+  return [count, effect];
+}
+```
+
+```ts
+export function useDebouncedEffect(effect: EffectCallback, duration: number, deps: DependencyList): void {
+  const [count, didChange] = useDebouncer(duration);
+  useEffect(didChange, deps); // When our deps change, notify our debouncer.
+  useEffect(effect, [count]); // When our debouncer finishes, run our effect.
+}
+```