Practical field notes

Pro tips for builders who ship.

Focused lessons for the stacks developers use every day — each with a production reason, a copy-ready example, and notes for the platforms you actually deploy on.

Stacks

7

Field notes

80

Depth

Beginner to advanced

Featured in React12 notes in this stack

Keep state close to the interaction

Local state avoids unnecessary parent renders and keeps component intent obvious.

React snippet

01function FilterPanel() {02  const [open, setOpen] = useState(false);03 04  return (05    <section>06      <button type="button" onClick={() => setOpen((value) => !value)}>07        Filters08      </button>09      {open ? <FilterOptions /> : null}10    </section>11  );12}

Beginner · 12 linesRead the full note

React field notes

Choose the idea you can use today.

Component design, state, memoization, and client islands. Each note includes production context, copy-ready examples, and platform-specific advice.

01

Keep state close to the interaction

Local state avoids unnecessary parent renders and keeps component intent obvious.

Beginner

02

Memoize only expensive work

Use memoization for costly derived values, not as decoration around every expression.

Intermediate

03

Split client islands carefully

Move the smallest interactive piece into a client component and keep the shell server-rendered.

Advanced

04

Prefer composition over prop tunnels

Use children and small slots instead of pushing many props through unrelated layers.

Intermediate

05

Derive state instead of syncing it

Avoid duplicate state when a value can be calculated from props or existing state.

Intermediate

06

Use stable keys for lists

Use real IDs for list keys so inputs, animations, and focus do not jump between rows.

Beginner

07

Design empty, loading, and error states

Every async component should say what is happening before, during, and after failure.

Beginner

08

Avoid effects for pure derivations

If a value can be calculated during render, do not put it in useEffect and setState.

Intermediate

09

Use refs for non-render values

Store timers, DOM nodes, and previous values in refs when changing them should not rerender.

Intermediate

10

Keep context narrow

Split context by responsibility so one tiny update does not rerender the whole app shell.

Advanced

11

Control forms intentionally

Use controlled inputs when live validation matters, and native form data when submit-time values are enough.

Intermediate

12

Test user behavior, not internals

Assert what users can see and do instead of testing component state names or private helpers.

Intermediate

A repeatable workflow

From useful idea to better production code.

Every field note follows the same short path, so you can understand it, use it, and verify the result without reading a long tutorial.

01

Learn

Understand the production reason and the tradeoff behind the pattern.

2–4 min

02

Apply

Copy the focused example, adapt the values, and use it in your stack.

Copy-ready

03

Improve

Check the real result, keep what works, and move to the next bottleneck.

Measure it