React

import { useState } from "react";

export function TodoList({ todos, onToggle }) {
  const [filter, setFilter] = useState("all");
  const visible = todos.filter((t) => filter === "all" || !t.done);
  if (visible.length === 0) return <p>Nothing to do.</p>;
  return (
    <section>
      <button onClick={() => setFilter(filter === "all" ? "open" : "all")}>Toggle filter</button>
      <ul>
        {visible.map((todo) => (
          <li key={todo.id}>
            <input type="checkbox" checked={todo.done} onChange={() => onToggle(todo.id)} />
            {todo.title}
          </li>
        ))}
      </ul>
    </section>
  );
}

TodoList, a component that takes todos and on toggle:
  Keep track of filter (starts as "all").
  Let visible be todos, keeping only those where filter is "all" or t's done is missing.
  If visible is empty, show a paragraph "Nothing to do.".
  Show a section containing:
    • a button "Toggle filter" (when clicked, set filter to "open" if filter is "all", otherwise "all")
    • a list containing:
      • for each todo in visible:
        • an item containing:
          • a checkbox (checked when todo's done is set; when changed, trigger on toggle (todo's ID))
          • todo's title

import { useEffect, useMemo, useRef } from "react";

export function ChatRoom({ roomId, messages }) {
  const inputRef = useRef(null);
  const unread = useMemo(() => messages.filter((m) => !m.read).length, [messages]);

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);

  return <h2>{unread} unread</h2>;
}

ChatRoom, a component that takes room ID and messages:
  Keep input ref as a value that survives re-renders (starts as nothing).
  Let unread be the number of messages where m's read is missing, recalculated only when messages changes.
  Whenever room ID changes:
    Create connection (room ID).
    Connect connection.
    Before running again and when it goes away, disconnect connection.
  Show a heading "{unread} unread".

import { Suspense, lazy, useActionState } from "react";

const Chart = lazy(() => import("./Chart"));

export function Profile() {
  const [error, submitAction, isPending] = useActionState(async (previous, formData) => {
    const error = await updateName(formData.get("name"));
    if (error) return error;
    return null;
  }, null);

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>Update</button>
      {error && <p>{error}</p>}
      <Suspense fallback={<Spinner />}>
        <Chart />
      </Suspense>
    </form>
  );
}

Let chart be the component from "./Chart", loaded the first time it is shown.

Profile, a component:
  Keep track of error (starts as nothing); submit action runs these steps and stores what it gives back, with is pending true while it runs:
    Update name (form data's entry for "name"), and call the result error.
    If error is set, give back error.
    Give back nothing.
  Show a form that runs submit action when submitted containing:
    • a text input (name: "name")
    • a submit button "Update" (disabled when it is pending)
    • if error is set, a paragraph showing error
    • Chart, showing Spinner while it loads