Formik: Taming React Form State
Formik is a state machine for your React forms, managing values, errors, and visited fields without providing UI. Use it to avoid boilerplate for validation and submission. The footgun is fighting its design by trying to integrate it with global state stores.
React Hook Form: Faster Forms with Less Code
React Hook Form builds performant forms by using uncontrolled inputs, avoiding re-renders on every keystroke. It's ideal for complex forms where managing state with `useState` becomes slow. The main footgun: overuse of `watch()` can negate performance gains.
FormData: Package Form Data for HTTP Requests
The FormData API is a digital shipping container for your form's data, packaging input into a format HTTP requests understand. Use it to send forms, including files, with `fetch()` without manually setting headers.
Typing React Component Props with TypeScript
Use TypeScript to define a 'contract' for your component's props with an `interface` or `type`. This catches bugs by ensuring data passed to a component has the correct shape. The footgun: files with JSX must use the `.tsx` extension.
useDebugValue: Label Your Custom Hooks in DevTools
useDebugValue attaches a readable label to your custom hooks in React DevTools. Instead of just seeing raw state, you can display a meaningful string like "Online". The footgun is overusing it; reserve it for complex, shared library hooks.
useSyncExternalStore: Safely Read from External State
useSyncExternalStore lets your React components safely subscribe to data outside of React's state. Use it to connect to state libraries like Zustand or browser APIs. The main footgun: your `getSnapshot` function must return an immutable, cached value.
useDeferredValue: Keep UI Responsive During Renders
useDeferredValue keeps your UI responsive by showing a stale value while a new, expensive-to-render value is prepared in the background. Use it for search inputs filtering large lists.
useTransition: Keep Your UI Responsive During State Changes
useTransition lets you update state without blocking the UI, keeping your app responsive. Use it for slow renders like filtering large lists, while the `isPending` flag shows a loading state.
useImperativeHandle: Expose a Custom Ref API
useImperativeHandle exposes a custom API via a ref, letting a parent call specific methods on a child. Instead of exposing an entire DOM node, you can provide a handle with methods like `reset()` or `focus()`.
useLayoutEffect: Synchronous Effects Before Browser Paint
useLayoutEffect is useEffect's synchronous twin, running its code after DOM mutations but before the browser repaints. Use it to read DOM layout and re-render to prevent visual flickers, like positioning a tooltip. Its main footgun: it blocks rendering.
React's Stale Closure Problem in Hooks
A `useEffect` closure captures props and state from its render. If the effect doesn't re-run, its functions can operate on old, "stale" data. This surfaces in timers or socket listeners. The footgun is omitting dependencies, which causes these subtle bugs.
useMemo: Cache Expensive Calculations in React
The useMemo hook caches a function's return value, preventing slow calculations from running on every render. Use it to skip heavy data filtering unless its inputs change. The main footgun is a missing dependency, which leads to stale, cached data.
React's useCallback: Cache Functions, Not Just Values
useCallback gives you the same function instance across re-renders, as long as its dependencies are stable. This is key for optimizing child components with React.memo or preventing useEffect from re-running.
The useReducer Hook: Predictable State Updates
useReducer is a state machine for your components, managing complex state changes predictably. Use it when state logic is complex or the next state depends on the previous one, like in a shopping cart.
Custom Hooks: Package Component Logic for Reuse
A custom hook packages stateful logic (like useState and useEffect) into a reusable function. Use one when multiple components need the same logic, like tracking online status for a status bar and a save button. Footgun: Names must start with `use`.
React Refs: Memory Without Re-renders
A React ref is like a secret pocket for your component to remember information without triggering re-renders. Use it to hold values not needed for rendering, like a timer ID. The footgun: changing a ref's value won't update the UI; use state for that.
Thinking in React: Decomposing UIs into Components
Think of UIs not as one big page, but as a tree of reusable components. Start by breaking a design mockup into a hierarchy of pieces. The footgun is creating 'god components' that do too much; each component should have a single responsibility.
useEffect: Syncing React with the Outside World
useEffect synchronizes your component with systems outside React's control, acting as a bridge to the browser or network. It's for data fetching or subscriptions.
Conditional Rendering: Show UI Based on State
React uses plain JavaScript to decide what UI to show, which is essential for displaying loading states, errors, or user-specific content. The footgun: `count && <Component />` will render a "0" if `count` is 0, not nothing.
React Events: Pass, Don't Call
React handles user actions with event handler functions passed as props, like `onClick={handleClick}`. This is how you make buttons or forms interactive. The key mistake is calling the function (`onClick={doIt()}`), which runs on render, not on click.