The framework

React

A library built on one idea: the screen is a function of state. You describe what it should look like for the data you have, and React works out the smallest set of DOM operations that gets there. Six concepts carry almost all of it.

Repo deep dive

Components & JSX

A component is a function from props to a description of UI. JSX is sugar for the calls that build that description — running it allocates plain objects and touches nothing on the page. Composition is one function calling another.

<Row n={1} />
// → jsx(Row, { n: 1 })

State & re-rendering

useState hands back a value and a way to ask for a different one. You never mutate it and you never patch the DOM — you set state, React calls your function again, and the gap between what it returned last time and this time is the update.

const [n, setN] = useState(0)
setN(n + 1)   // re-render, not a mutation

Hooks

Hooks give a plain function memory. React keeps them in a list hanging off the component and lines this render up against the last one by call order alone — which is the entire reason a hook cannot sit inside a condition or a loop.

useState, useRef, useMemo, useEffect
// same calls, same order, every render

Reconciliation

Re-rendering produces a fresh tree of description objects, never DOM. React compares it against the previous one and writes only the difference: same type patched in place, different type replaced wholesale, keys saying which item is which across a reorder.

{todos.map(t => <Row key={t.id} … />)}

6 sub-nodes →

Effects

useEffect is not a lifecycle callback, it is a synchronisation: here is the outside thing that should match my state, and here is how to undo it. React runs it after paint and runs it again whenever a value it depends on has changed.

useEffect(() => {
  const c = connect(room)
  return () => c.close()
}, [room])

Props, children & context

Data goes down as props and comes back up through callbacks the parent handed over. children lets a parent pass finished markup into a child that knows nothing about it, and context skips the layers in between when everything below needs the same value.

<Card>{rows}</Card>
const theme = useContext(ThemeContext)