All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
4247 bites
Page 15
useState: Giving Components Memory
useState gives a component its own memory, letting it track information that changes over time. It's used for everything from handling form input to toggling UI. The biggest footgun: state updates are asynchronous and only apply on the next render.
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.
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.
Lists and Keys in React
React turns arrays into UI with map, yet each child needs a unique key prop or you get console warnings. Filter first, then map. The footgun: forgetting keys or failing to include stable unique IDs in your source data.
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.
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.
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.
React's Rule: Favor Composition Over Inheritance
Instead of extending a base component, build complex UIs by wrapping and configuring smaller ones. Use this for generic containers like dialogs or for creating specialized versions of a component.
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.
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.
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.
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 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.
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.
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().
React's Controlled vs. Uncontrolled Components
A controlled component is a form input whose value is driven by React state; an uncontrolled component lets the DOM manage its own state. Use controlled for instant validation or conditional logic.
Compound Components: Build Flexible APIs via Shared State
Think of HTML's <select> and <option>. The Compound Component pattern lets a parent manage state while children act as declarative configuration. It's used for flexible UI like tabs or accordions.
Next.js Layouts: Shared UI That Survives Navigation
Think of a Next.js Layout as a picture frame that stays put while you swap the pictures (Pages) inside. It defines shared UI like headers that persist across routes, preserving state.
next/dynamic: Defer Loading Heavy Components
next/dynamic splits a component into its own file, loading it only when needed to shrink your initial bundle. Use it for heavy components below the fold or browser-only libraries. The footgun: forgetting a loading state causes layout shifts.
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.