Define components at top levelDefine components at top level

Inputs lose focus

Type a name into both fields.

function SearchField({ value, onChange }) {
  const [keystrokes, setKeystrokes] = useState(0)
  return (
    <label>
      Search customers
      <input
        value={value}
        onChange={(e) => {
          setKeystrokes((n) => n + 1)
          onChange(e.target.value)
        }}
      />
    </label>
  )
}

function CustomerPicker({ customers }) {
  const [query, setQuery] = useState('')
  const matches = customers.filter((c) => c.name.includes(query))
  return (
    <>
      <SearchField value={query} onChange={setQuery} />
      <Results items={matches} />
    </>
  )
}

Animations restart from zero

Bump the parent, or turn on auto re-render.

function Spinner({ label }) {
  const mountedAt = useRef(performance.now())
  return <svg className="animate-spin" role="img" aria-label={label}>…</svg>
}

function Dashboard() {
  const [count, setCount] = useState(0)
  return (
    <>
      <Spinner label="Syncing" />
      <button onClick={() => setCount((n) => n + 1)}>Count +1</button>
    </>
  )
}

Scroll resets, effects rerun

Scroll both lists, then wait for the clock to tick.

function Stats({ rows, asOf }) {
  useEffect(() => {
    const unsubscribe = feed.subscribe()
    return unsubscribe
  }, [])
  return (
    <section>
      <p>As of {asOf}</p>
      <ul className="overflow-y-auto">
        {rows.map((r) => <Row key={r.id} {...r} />)}
      </ul>
    </section>
  )
}

function Ledger({ rows }) {
  const now = useClock(1000)
  return <Stats rows={rows} asOf={now} />
}

Why it matters, pros and cons