Review Questions

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  }

  return <button onClick={handleClick}>{count}</button>;
}

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => { setCount(count + 5); setCount((c) => c + 1); }}>A</button>
      <button onClick={() => { setCount((c) => c + 1); setCount(42); }}>B</button>
      <p>{count}</p>
    </>
  );
}

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
    console.log("right after:", count);
    setTimeout(() => console.log("1 s later:", count), 1000);
  }

  return <button onClick={handleClick}>{count}</button>;
}

function TodoList() {
  const [todos, setTodos] = useState(["Learn hooks"]);

  function add() {
    todos.push("Write tests");
    setTodos(todos);
  }

  return (
    <>
      <button onClick={add}>Add</button>
      <ul>{todos.map((t, i) => <li key={i}>{t}</li>)}</ul>
    </>
  );
}

function List() {
  const [items, setItems] = useState(["Apple", "Banana"]);
  return (
    <>
      <button onClick={() => setItems(["Cherry", ...items])}>Add to top</button>
      {items.map((item, index) => (
        <div key={index}>
          <label>{item} <input /></label>
        </div>
      ))}
    </>
  );
}

function Inbox({ messages }) {
  return <div>{messages.length && <p>You have {messages.length} messages</p>}</div>;
}
// <Inbox messages={[]} />
// <Inbox messages={["hi", "yo"]} />

function Name() {
  const [name] = useState("Rohit");
  return <input aria-label="Name" value={name} />;
}

function Score({ player }) {
  const [score, setScore] = useState(0);
  return <button onClick={() => setScore(score + 1)}>{player}: {score}</button>;
}

function Game() {
  const [first, setFirst] = useState(true);
  return (
    <>
      {first ? <Score player="Alice" /> : <Score player="Bob" />}
      <a onClick={() => setFirst(!first)}>Switch</a>
    </>
  );
}

let renders = 0;

function Profile() {
  const [name, setName] = useState("");
  const [age, setAge] = useState(0);
  renders++;

  function load() {
    setTimeout(() => {
      setName("Rohit");
      setAge(30);
    }, 0);
  }

  return <button onClick={load}>{name} {age}</button>;
}

class Counter extends Component {
  state = { n: 0 };

  handleClick = () => {
    this.setState({ n: this.state.n + 1 });
    this.setState({ n: this.state.n + 1 });
    console.log("this.state.n:", this.state.n);
    this.setState((prev) => ({ n: prev.n + 10 }), () => console.log("callback:", this.state.n));
  };

  render() {
    return <button onClick={this.handleClick}>{this.state.n}</button>;
  }
}

function Logger({ value }) {
  console.log("render", value);
  useEffect(() => {
    console.log("effect", value);
    return () => console.log("cleanup", value);
  }, [value]);
  return null;
}
// mount <Logger value={1} />, rerender with value 2, rerender with 2 again, unmount

render(
  <StrictMode>
    <Logger value={1} />
  </StrictMode>
);

function Profile({ userId }) {
  const [user, setUser] = useState(null);
  const options = { id: userId };

  useEffect(() => {
    setUser({ ...options });
  }, [options]);

  return <p>{user?.id}</p>;
}

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setSeconds(seconds + 1), 1000);
    return () => clearInterval(id);
  }, []);

  return <p>{seconds}</p>;
}

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(async () => {
    const res = await fetch("/api/users");
    setUsers(await res.json());
  }, []);

  return <p>{users.join()}</p>;
}

function Results({ query }) {
  const [results, setResults] = useState("");

  useEffect(() => {
    search(query).then((r) => setResults(r));
  }, [query]);

  return <p>{results}</p>;
}
// query changes from "a" to "ab"; the "ab" response arrives first, then the "a" response

function ClickCounter() {
  const clicks = useRef(0);
  return (
    <button onClick={() => { clicks.current++; console.log("clicks:", clicks.current); }}>
      Clicked {clicks.current}
    </button>
  );
}

function Child() {
  useEffect(() => console.log("child effect"));
  useLayoutEffect(() => console.log("child layout effect"));
  console.log("child render");
  return null;
}

function Parent() {
  useEffect(() => console.log("parent effect"));
  useLayoutEffect(() => console.log("parent layout effect"));
  console.log("parent render");
  return <Child />;
}

function Box() {
  const [n, setN] = useState(0);
  return (
    <div
      ref={(node) => {
        console.log("attach", node.tagName);
        return () => console.log("detach");
      }}
      onClick={() => setN(n + 1)}
    >
      {n}
    </div>
  );
}
// mount, click once, unmount

function App() {
  return (
    <div onClick={() => console.log("React parent onClick")}>
      {createPortal(<button>Inside portal</button>, document.body)}
    </div>
  );
}
// a native listener is also added to the element App renders into:
// container.addEventListener("click", () => console.log("DOM listener on container"))

function Profile({ showEmail }) {
  const [name] = useState("Rohit");
  if (showEmail) {
    const [email] = useState("rohit@example.com");
    return <p>{name} {email}</p>;
  }
  return <p>{name}</p>;
}
// render with showEmail={false}, then rerender with showEmail={true}

const Child = memo(function Child({ onSelect, style }) {
  console.log("Child render");
  return <p style={style} onClick={onSelect}>child</p>;
});

function Parent() {
  const [n, setN] = useState(0);
  return (
    <>
      <button onClick={() => setN(n + 1)}>{n}</button>
      <Child onSelect={() => {}} style={{ color: "red" }} />
    </>
  );
}

function ExpensiveTree() {
  console.log("ExpensiveTree render");
  return <p>tree</p>;
}

// Version 1
function Page() {
  const [colour, setColour] = useState("red");
  return (
    <div style={{ color: colour }}>
      <button onClick={() => setColour("blue")}>Blue</button>
      <ExpensiveTree />
    </div>
  );
}

// Version 2: <ColourPicker><ExpensiveTree /></ColourPicker>
function ColourPicker({ children }) {
  const [colour, setColour] = useState("red");
  return (
    <div style={{ color: colour }}>
      <button onClick={() => setColour("blue")}>Blue</button>
      {children}
    </div>
  );
}

const Card = memo(function Card({ children }) {
  console.log("Card render");
  return <div>{children}</div>;
});

function App() {
  const [n, setN] = useState(0);
  return (
    <>
      <button onClick={() => setN(n + 1)}>{n}</button>
      <Card><p>Hello</p></Card>
    </>
  );
}

const sorted = useMemo(() => [...items].sort(byName), [items]);
const onSelect = useCallback((id) => setSelected(id), []);

function useToggle() {
  const [on, setOn] = useState(false);
  return [on, () => setOn((o) => !o)];
}

function A() {
  const [on, toggle] = useToggle();
  return <button onClick={toggle}>A is {on ? "on" : "off"}</button>;
}

function B() {
  const [on] = useToggle();
  return <p>B is {on ? "on" : "off"}</p>;
}
// <A /><B />, then click A's button

function DebouncedSearch({ onSearch, delay = 300 }) {
  const [text, setText] = useState("");

  useEffect(() => {
    if (!text) return;
    const id = setTimeout(() => onSearch(text), delay);
    return () => clearTimeout(id);
  }, [text, delay, onSearch]);

  return <input aria-label="Search" value={text} onChange={(e) => setText(e.target.value)} />;
}
// the user types "abc" quickly, then waits 300 ms

// You write:
function ProductList({ products, filter }) {
  const visible = products.filter((p) => p.name.includes(filter));
  return <List items={visible} onSelect={(id) => track(id)} />;
}

function Album({ id }) {
  const album = use(fetchAlbum(id)); // cached promise per id
  return <h2>{album.title}</h2>;
}

function App() {
  const [id, setId] = useState(1);
  const [isPending, startTransition] = useTransition();
  return (
    <>
      <button onClick={() => setId(id + 1)}>Next</button>
      <button onClick={() => startTransition(() => setId(id + 1))}>Next (transition)</button>
      {isPending && <span>Switching…</span>}
      <Suspense fallback={<p>Loading…</p>}>
        <Album id={id} />
      </Suspense>
    </>
  );
}

const [isPending, startTransition] = useTransition();
startTransition(() => setTab("photos"));

const deferredQuery = useDeferredValue(query);
<SlowResults query={deferredQuery} />

const UserContext = createContext(null);

const Avatar = memo(function Avatar() {
  const { user } = useContext(UserContext);
  console.log("Avatar render");
  return <p>{user.name}</p>;
});

function App() {
  const [count, setCount] = useState(0);
  const [user] = useState({ name: "Rohit" });
  return (
    <UserContext value={{ user }}>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <Avatar />
    </UserContext>
  );
}

const ThemeContext = createContext("light");

function Label() {
  return <span>[{String(useContext(ThemeContext))}]</span>;
}

<>
  <Label />
  <ThemeContext value="dark"><Label /></ThemeContext>
  <ThemeContext value={undefined}><Label /></ThemeContext>
</>

function todosReducer(state = { items: [] }, action) {
  switch (action.type) {
    case "todos/added":
      state.items.push(action.payload);
      return state;
    default:
      return state;
  }
}

const store = createStore(todosReducer); // plain Redux, no Toolkit
// a component shows useSelector((s) => s.items).length

const slice = createSlice({
  name: "todos",
  initialState: [],
  reducers: {
    added(state, action) {
      state.push(action.payload);
      return [...state];
    },
  },
});

function Name() {
  const { name, age } = useSelector((s) => ({ name: s.name, age: s.age }));
  return <p>{name} {age}</p>;
}
// dispatch an unrelated action (it changes s.clicks) twice

const store = createStore(reducer, applyMiddleware(thunk)); // reducer logs "reducer: <type>"

const fetchUser = () => async (dispatch, getState) => {
  console.log("thunk starts, status:", getState().status);
  dispatch({ type: "user/loading" });
  const user = await api.getUser();
  dispatch({ type: "user/loaded", user });
};

const returned = store.dispatch(fetchUser());
console.log("after dispatch, status:", store.getState().status, "returned a Promise:", returned instanceof Promise);
await returned;
console.log("after await, status:", store.getState().status);

const fetchUser = createAsyncThunk("users/fetch", async (id) => {
  if (id < 0) throw new Error("bad id");
  return { id, name: "Asha" };
});

const ok = await store.dispatch(fetchUser(1));
const failed = await store.dispatch(fetchUser(-1));
await store.dispatch(fetchUser(-1)).unwrap();

const fetchTodos = vi.fn(async () => ["a", "b"]);
const useTodos = (key) => useQuery({ queryKey: key, queryFn: fetchTodos });

function Count() { const { data } = useTodos(["todos"]); /* … */ }
function List()  { const { data } = useTodos(["todos"]); /* … */ }
function Done()  { const { data } = useTodos(["todos", { done: true }]); /* … */ }
// <Count /><List /><Done /> under one QueryClientProvider

function User() {
  const { data } = useQuery({ queryKey: ["user"], queryFn: fetchUser, staleTime });
  return <p>{data ? data.name : "loading"}</p>;
}
// mount, wait for data, unmount, mount again

const useStore = create((set) => ({
  count: 0,
  name: "Rohit",
  rename: (name) => set({ name }),
  increment: () => set((s) => ({ count: s.count + 1 })),
}));

function CountLabel() { const count = useStore((s) => s.count); /* … */ }
function WholeStore() { const s = useStore(); /* … */ }
// rename("Asha"), rename("Ravi"), increment()

async function addToCart(prevState, formData) {
  const qty = Number(formData.get("qty"));
  await saveToServer(qty);
  if (qty > 5) return { ...prevState, error: "You can add at most 5" };
  return { error: null, total: prevState.total + qty };
}

function AddForm() {
  const [state, formAction, isPending] = useActionState(addToCart, { error: null, total: 0 });
  return (
    <form action={formAction}>
      <input aria-label="Quantity" name="qty" defaultValue="1" />
      <button>{isPending ? "Adding…" : "Add"}</button>
      <p>Total: {state.total}</p>
      {state.error && <p role="alert">{state.error}</p>}
    </form>
  );
}

function LikeButton() {
  const [likes, setLikes] = useState(10);
  const [optimisticLikes, addOptimistic] = useOptimistic(likes, (current, delta) => current + delta);

  function like() {
    startTransition(async () => {
      addOptimistic(1);
      try {
        await saveLike();
        startTransition(() => setLikes((l) => l + 1));
      } catch {
        console.log("save failed");
      }
    });
  }

  return <button onClick={like}>♥ {optimisticLikes}</button>;
}

function User() {
  const user = use(fetch("/api/user").then((r) => r.json()));
  return <h1>{user.name}</h1>;
}
// <Suspense fallback={<p>Loading…</p>}><User /></Suspense>

function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}
Greeting.defaultProps = { name: "Guest" };
Greeting.propTypes = { name: PropTypes.string.isRequired };

function Modern({ name = "Guest" }) {
  return <p>Hi, {name}!</p>;
}

class OldClass extends Component {
  static defaultProps = { name: "Guest" };
  render() { return <p>Class: {this.props.name}</p>; }
}

<><Greeting /><Greeting name={42} /><Modern /><OldClass /></>

import * as ReactDOM from "react-dom";

console.log(typeof ReactDOM.render, typeof ReactDOM.hydrate,
  typeof ReactDOM.unmountComponentAtNode, typeof ReactDOM.findDOMNode);
console.log(typeof ReactDOM.createPortal, typeof ReactDOM.flushSync);
ReactDOM.render(<App />, document.getElementById("root"));

function Bomb() {
  const [explode, setExplode] = useState(false);
  if (explode) throw new Error("render boom");
  return (
    <>
      <button onClick={() => { throw new Error("click boom"); }}>Throw in handler</button>
      <button onClick={() => setExplode(true)}>Throw in render</button>
    </>
  );
}

<ErrorBoundary fallback={<p role="alert">Something went wrong</p>}>
  <Bomb />
</ErrorBoundary>

function withBorder(Wrapped) {
  return function Bordered(props) {
    return <div className="border"><Wrapped {...props} /></div>;
  };
}

function Page() {
  const [n, setN] = useState(0);
  const BorderedInput = withBorder(NameInput); // NameInput renders <input aria-label="Name" />
  return (
    <>
      <button onClick={() => setN(n + 1)}>Re-render ({n})</button>
      <BorderedInput />
    </>
  );
}

function Dashboard() {
  return <h1>Dashboard</h1>;
}

<MemoryRouter initialEntries={["/dashboard/settings"]}>
  <Routes>
    <Route path="dashboard" element={<Dashboard />}>
      <Route path="settings" element={<h2>Settings</h2>} />
    </Route>
  </Routes>
</MemoryRouter>

function Clock() {
  const [time, setTime] = useState("not set");
  console.log("render, time =", time);
  useEffect(() => {
    console.log("effect runs");
    setTime("12:00");
  });
  return <p>Time: {time}</p>;
}

const html = renderToString(<Clock />);

function Stamp({ where }) {
  return <p>Rendered on the {where}</p>;
}

container.innerHTML = renderToString(<Stamp where="server" />);
hydrateRoot(container, <Stamp where="client" />, {
  onRecoverableError: (error) => console.log(error.message),
});

// Server Component (the default in the Next.js App Router)
import { db } from "./db";
import LikeButton from "./LikeButton";

export default async function Page() {
  const post = await db.post.findFirst();
  return (
    <article>
      <h1>{post.title}</h1>
      <LikeButton postId={post.id} initialLikes={post.likes} />
    </article>
  );
}

"use client";
import { useState } from "react";

export default function LikeButton({ postId, initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);
  return <button onClick={() => setLikes(likes + 1)}>♥ {likes}</button>;
}

test("toggles on", async () => {
  const user = userEvent.setup();
  render(<Toggle />); // a button showing "Off", then "On" after a click
  user.click(screen.getByRole("button"));
  expect(screen.getByRole("button")).toHaveTextContent("On");
});

test("no error message", () => {
  render(<p>All good</p>);
  expect(screen.getByText("Error")).not.toBeInTheDocument();
});

fireEvent.click(screen.getByText("Fetch Data"));

expect(screen.getByText("Fetched Data")).toBeInTheDocument();                         // 1
expect(await screen.findByText("Fetched Data")).toBeInTheDocument();                  // 2
await waitFor(() => expect(screen.getByText("Fetched Data")).toBeInTheDocument());    // 3

new ModuleFederationPlugin({
  name: "HostApp",
  remotes: { RemoteApp: "RemoteApp@http://localhost:3001/remoteEntry.js" },
  shared: {
    react: { singleton: true },
    "react-dom": { singleton: true },
  },
});