Structuring an app all 4 written

theme.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37import { createContext, useContext, act } from 'react';
import { createRoot } from 'react-dom/client';

const ThemeContext = createContext('light');

function Label({ name }) {
  const theme = useContext(ThemeContext);
  return <p>{name}: {theme}</p>;
}

const root = createRoot(stage);
await act(async () =>
  root.render(
    <>
      <Label name="none" />
      <ThemeContext value="dark">
        <Label name="outer" />
        <ThemeContext value="contrast">
          <Label name="inner" />
        </ThemeContext>
        <Label name="again" />
      </ThemeContext>
      <ThemeContext.Provider value="dark">
        <Label name="old way" />
      </ThemeContext.Provider>
    </>,
  ),
);
const lines = Array.from(stage.querySelectorAll('p')).map((p) => p.textContent);
console.log(lines);

check('no provider: the default', lines[0], 'none: light');
check('a provider sets the value below it', lines[1], 'outer: dark');
check('a nested provider overrides it', lines[2], 'inner: contrast');
check('and only for its own subtree', lines[3], 'again: dark');
check('.Provider still works and reads the same', lines[4], 'old way: dark');
await act(async () => root.unmount());

readers.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39import { createContext, useContext, useState, act } from 'react';
import { createRoot } from 'react-dom/client';

const ThemeContext = createContext('light');
const renders = { page: 0, reader: 0 };

function Reader() {
  renders.reader += 1;
  return <b>{useContext(ThemeContext)}</b>;
}

function Page() {
  renders.page += 1;
  return <Reader />;
}

function Theme({ children }) {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext value={theme}>
      {children}
      <button onClick={() => setTheme('dark')}>go dark</button>
    </ThemeContext>
  );
}

const root = createRoot(stage);
await act(async () => root.render(<Theme><Page /></Theme>));
const before = { ...renders };
const textBefore = stage.querySelector('b').textContent;
await act(async () => stage.querySelector('button').click());
const textAfter = stage.querySelector('b').textContent;
console.log(before, renders, textBefore, textAfter);

check('the reader showed the old value', textBefore, 'light');
check('and the new one after the change', textAfter, 'dark');
check('the reader rendered again', renders.reader - before.reader, 1);
check('the component between did not', renders.page - before.page, 0);
await act(async () => root.unmount());

identity.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50import { createContext, useContext, useMemo, useState, act } from 'react';
import { createRoot } from 'react-dom/client';

const UserContext = createContext(null);
const renders = { loose: 0, steady: 0 };

function LooseReader() {
  renders.loose += 1;
  return <i>{useContext(UserContext).name}</i>;
}

function SteadyReader() {
  renders.steady += 1;
  return <i>{useContext(UserContext).name}</i>;
}

function Loose({ children }) {
  const [clicks, setClicks] = useState(0);
  return (
    <UserContext value={{ name: 'Ada' }}>
      {children}
      <button onClick={() => setClicks(clicks + 1)}>clicks {clicks}</button>
    </UserContext>
  );
}

function Steady({ children }) {
  const [clicks, setClicks] = useState(0);
  const user = useMemo(() => ({ name: 'Ada' }), []);
  return (
    <UserContext value={user}>
      {children}
      <button onClick={() => setClicks(clicks + 1)}>clicks {clicks}</button>
    </UserContext>
  );
}

async function clickOnce(tree) {
  const root = createRoot(stage);
  await act(async () => root.render(tree));
  await act(async () => stage.querySelector('button').click());
  await act(async () => root.unmount());
}

await clickOnce(<Loose><LooseReader /></Loose>);
await clickOnce(<Steady><SteadyReader /></Steady>);
console.log(renders);

check('a new object each render: the reader rendered again', renders.loose, 2);
check('the same object: the reader rendered once', renders.steady, 1);

use-context.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22import { createContext, use, act } from 'react';
import { createRoot } from 'react-dom/client';

const ThemeContext = createContext('light');

function Panel({ open }) {
  if (!open) return <p>closed</p>;
  const theme = use(ThemeContext);
  return <p>open, {theme}</p>;
}

const root = createRoot(stage);
const seen = [];
await act(async () => root.render(<ThemeContext value="dark"><Panel open={false} /></ThemeContext>));
seen.push(stage.textContent);
await act(async () => root.render(<ThemeContext value="dark"><Panel open={true} /></ThemeContext>));
seen.push(stage.textContent);
console.log(seen);

check('closed: the context was never read', seen[0], 'closed');
check('open: use() read it after the early return', seen[1], 'open, dark');
await act(async () => root.unmount());

cart.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14export const initialCart = { items: [] };

export function cartReducer(state, action) {
  switch (action.type) {
    case 'add':
      return { ...state, items: [...state.items, action.item] };
    case 'remove':
      return { ...state, items: state.items.filter((item) => item !== action.item) };
    case 'clear':
      return { ...state, items: [] };
    default:
      throw new Error('Unknown action: ' + action.type);
  }
}

cart.test.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23import { cartReducer, initialCart } from './cart.js';

const one = cartReducer(initialCart, { type: 'add', item: 'tea' });
const two = cartReducer(one, { type: 'add', item: 'milk' });
const three = cartReducer(two, { type: 'remove', item: 'milk' });
const four = cartReducer(three, { type: 'clear' });
console.log(one, two, three, four);

check('add puts the item in a new state', one, { items: ['tea'] });
check('add again', two, { items: ['tea', 'milk'] });
check('remove takes one out', three, { items: ['tea'] });
check('clear empties it', four, { items: [] });
check('the starting state was not changed', initialCart, { items: [] });
check('the earlier state was not changed either', two.items, ['tea', 'milk']);
check('a new object each time', one !== initialCart, true);

let message = '';
try {
  cartReducer(initialCart, { type: 'explode' });
} catch (e) {
  message = e.message;
}
check('an unknown action is an error', message, 'Unknown action: explode');

App.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30import { useReducer, act } from 'react';
import { createRoot } from 'react-dom/client';
import { cartReducer, initialCart } from './cart.js';

function Cart() {
  const [cart, dispatch] = useReducer(cartReducer, initialCart);
  return (
    <div>
      <button id="tea" onClick={() => dispatch({ type: 'add', item: 'tea' })}>add tea</button>
      <button id="milk" onClick={() => dispatch({ type: 'add', item: 'milk' })}>add milk</button>
      <button id="drop" onClick={() => dispatch({ type: 'remove', item: 'milk' })}>remove milk</button>
      <p>{cart.items.join(', ') || 'empty'}</p>
    </div>
  );
}

const root = createRoot(stage);
await act(async () => root.render(<Cart />));
const text = () => stage.querySelector('p').textContent;
const seen = [text()];
await act(async () => stage.querySelector('#tea').click());
seen.push(text());
await act(async () => stage.querySelector('#milk').click());
seen.push(text());
await act(async () => stage.querySelector('#drop').click());
seen.push(text());
console.log(seen);

check('the states, step by step', seen, ['empty', 'tea', 'tea, milk', 'tea']);
await act(async () => root.unmount());

init.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30import { useReducer, act } from 'react';
import { createRoot } from 'react-dom/client';

let initCalls = 0;

function init(count) {
  initCalls += 1;
  return { items: Array.from({ length: count }, (_, i) => 'item ' + (i + 1)) };
}

function reducer(state, action) {
  return action.type === 'more' ? { items: [...state.items, 'item ' + (state.items.length + 1)] } : state;
}

function List({ start }) {
  const [state, dispatch] = useReducer(reducer, start, init);
  return <button onClick={() => dispatch({ type: 'more' })}>{state.items.join(', ')}</button>;
}

const root = createRoot(stage);
await act(async () => root.render(<List start={2} />));
const first = stage.textContent;
await act(async () => stage.querySelector('button').click());
const second = stage.textContent;
console.log(first, '|', second, initCalls);

check('init built the starting state', first, 'item 1, item 2');
check('dispatch added to it', second, 'item 1, item 2, item 3');
check('init ran once, not on the second render', initCalls, 1);
await act(async () => root.unmount());

twice.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31import { StrictMode, useReducer, act } from 'react';
import { createRoot } from 'react-dom/client';

let calls = 0;

function reducer(state, action) {
  calls += 1;
  return state + action;
}

function Counter() {
  const [n, dispatch] = useReducer(reducer, 0);
  return <button onClick={() => dispatch(1)}>{n}</button>;
}

async function clickOnce(tree) {
  calls = 0;
  const root = createRoot(stage);
  await act(async () => root.render(tree));
  await act(async () => stage.querySelector('button').click());
  const result = { calls, shown: stage.textContent };
  await act(async () => root.unmount());
  return result;
}

const plain = await clickOnce(<Counter />);
const strict = await clickOnce(<StrictMode><Counter /></StrictMode>);
console.log(plain, strict);

check('without StrictMode: one call, one step', plain, { calls: 1, shown: '1' });
check('with StrictMode: two calls, still one step', strict, { calls: 2, shown: '1' });

toggle.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25import { useState, act } from 'react';
import { createRoot } from 'react-dom/client';

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

function Switch({ name }) {
  const [on, toggle] = useToggle();
  return <button onClick={toggle}>{name}: {on ? 'on' : 'off'}</button>;
}

const root = createRoot(stage);
await act(async () => root.render(<><Switch name="first" /><Switch name="second" /></>));
const texts = () => Array.from(stage.querySelectorAll('button')).map((b) => b.textContent);
const before = texts();
await act(async () => stage.querySelectorAll('button')[0].click());
const after = texts();
console.log(before, after);

check('both start off', before, ['first: off', 'second: off']);
check('one click changed one of them', after, ['first: on', 'second: off']);
await act(async () => root.unmount());

shapes.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30import { useState } from 'react';
import { renderToStaticMarkup } from 'react-dom/server';

function useToggle(initial) {
  const [value, setValue] = useState(initial);
  return [value, () => setValue(!value)];
}

function useCounter(start) {
  const [count, setCount] = useState(start);
  return { count, increment: () => setCount(count + 1), reset: () => setCount(start) };
}

function Menu() {
  const [open, toggleOpen] = useToggle(true);
  const [dark, toggleDark] = useToggle(false);
  return <p>{open ? 'open' : 'shut'} {dark ? 'dark' : 'light'}</p>;
}

function Score() {
  const { count, increment } = useCounter(5);
  return <p>{count} {typeof increment}</p>;
}

const menu = renderToStaticMarkup(<Menu />);
const score = renderToStaticMarkup(<Score />);
console.log(menu, score);

check('the array names were the caller\'s own', menu, '<p>open light</p>');
check('the object names were the hook\'s', score, '<p>5 function</p>');

subscribe.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44import { useEffect, act } from 'react';
import { createRoot } from 'react-dom/client';

const bus = new window.EventTarget();
let active = 0;
const add = bus.addEventListener.bind(bus);
const remove = bus.removeEventListener.bind(bus);
bus.addEventListener = (type, fn) => {
  active += 1;
  add(type, fn);
};
bus.removeEventListener = (type, fn) => {
  active -= 1;
  remove(type, fn);
};

function useEvent(target, type, handler) {
  useEffect(() => {
    target.addEventListener(type, handler);
    return () => target.removeEventListener(type, handler);
  }, [target, type, handler]);
}

const heard = [];
function Listener() {
  useEvent(bus, 'ping', onPing);
  return <p>listening</p>;
}
function onPing() {
  heard.push('ping');
}

const root = createRoot(stage);
await act(async () => root.render(<Listener />));
const whileMounted = active;
bus.dispatchEvent(new window.Event('ping'));
await act(async () => root.unmount());
const afterUnmount = active;
bus.dispatchEvent(new window.Event('ping'));
console.log(whileMounted, afterUnmount, heard);

check('one listener while mounted', whileMounted, 1);
check('none after unmount', afterUnmount, 0);
check('the handler ran once, for the event sent while mounted', heard, ['ping']);

ticker.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48import { useState, useEffect, act } from 'react';
import { createRoot } from 'react-dom/client';

const live = new Set();
let latest = 0;
let fired = 0;

function useTicker(ms) {
  const [ticks, setTicks] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      fired += 1;
      setTicks((n) => n + 1);
    }, ms);
    live.add(id);
    return () => {
      clearInterval(id);
      live.delete(id);
    };
  }, [ms]);
  return ticks;
}

function Clock() {
  latest = useTicker(5);
  return <p>ticks {latest}</p>;
}

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const root = createRoot(stage);
await act(async () => root.render(<Clock />));
const liveWhileMounted = live.size;
for (let i = 0; i < 20 && latest < 2; i++) {
  await act(async () => {
    await wait(20);
  });
}
const reached = latest;
await act(async () => root.unmount());
const firedAtUnmount = fired;
await wait(40);
console.log(liveWhileMounted, live.size, reached >= 2, fired === firedAtUnmount);

check('one live timer while mounted', liveWhileMounted, 1);
check('it ticked at least twice', reached >= 2, true);
check('no live timer after unmount', live.size, 0);
check('and the timer stopped firing', fired === firedAtUnmount, true);

conditional-fixed.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20import { useState, useEffect, act } from 'react';
import { createRoot } from 'react-dom/client';

function Toggled({ extra }) {
  const [name] = useState('Ada');
  const [note] = useState('hi');
  useEffect(() => {}, []);
  return <p>{extra ? name + ', ' + note : name}</p>;
}

const root = createRoot(stage);
await act(async () => root.render(<Toggled extra={false} />));
const first = stage.innerHTML;
await act(async () => root.render(<Toggled extra={true} />));
const second = stage.innerHTML;
console.log(first, second);

check('with extra off', first, '<p>Ada</p>');
check('with extra on, the same three hooks, no error', second, '<p>Ada, hi</p>');
await act(async () => root.unmount());

early-return-fixed.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20import { useState, act } from 'react';
import { createRoot } from 'react-dom/client';

function Greeting({ done }) {
  const [name] = useState('Ada');
  const [greeting] = useState('Hello');
  if (done) return <p>finished</p>;
  return <p>{greeting}, {name}</p>;
}

const root = createRoot(stage);
await act(async () => root.render(<Greeting done={false} />));
const first = stage.innerHTML;
await act(async () => root.render(<Greeting done={true} />));
const second = stage.innerHTML;
console.log(first, second);

check('before', first, '<p>Hello, Ada</p>');
check('after, with the early return and no error', second, '<p>finished</p>');
await act(async () => root.unmount());

outside-fixed.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23import { useState, act } from 'react';
import { createRoot } from 'react-dom/client';

function useName() {
  const [name] = useState('Ada');
  return name;
}

function shout(name) {
  return name.toUpperCase();
}

function Name() {
  const name = useName();
  return <p>{shout(name)}</p>;
}

const root = createRoot(stage);
await act(async () => root.render(<Name />));
console.log(stage.innerHTML);

check('the hook ran inside a component and the plain function got its value', stage.innerHTML, '<p>ADA</p>');
await act(async () => root.unmount());