Practical field notes

Pro Tips for builderswho ship.

Focused lessons for the stacks developers use every day. Each category now has its own crawlable page, so users and search engines can land directly on the right topic.

React field note

Featured

Keep state close to the interaction

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

CodeCopy

function FilterPanel() {
  const [open, setOpen] = useState(false);

  return (
    <section>
      <button type="button" onClick={() => setOpen((value) => !value)}>
        Filters
      </button>
      {open ? <FilterOptions /> : null}
    </section>
  );
}

Technology switchboard

Pick a stack, then open a focused field note.

Start with React

React field notes

Choose the ideayou can use today.

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

Keep state close to the interaction

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

Beginner

Memoize only expensive work

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

Intermediate

Split client islands carefully

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

Advanced

Prefer composition over prop tunnels

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

Intermediate

Derive state instead of syncing it

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

Intermediate

Use stable keys for lists

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

Beginner

Design empty, loading, and error states

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

Beginner

Avoid effects for pure derivations

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

Intermediate

Use refs for non-render values

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

Intermediate

Keep context narrow

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

Advanced

Control forms intentionally

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

Intermediate

Test user behavior, not internals

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

Intermediate

Learn

Read one focused tip and understand why it works.

Apply

Use the idea immediately in your stack or workflow.

Improve

Measure the result and keep the pattern for later.