React
262 bites tagged React — interview questions with model answers, and 60-second explainers.
useSyncExternalStore: For Synchronous External State
`useSyncExternalStore` lets React safely read from external data sources without UI tearing. It's for integrating non-React state, like from Redux or browser APIs, ensuring consistent reads during concurrent rendering.
Zustand: Lightweight Global State for React
Zustand provides simple global state management for React, feeling like a shared `useState` hook for your whole app. Use it in small to medium apps where Redux is overkill. The main footgun is its limited ecosystem, making it a risk for large-scale apps.
Testing Custom Hooks with `renderHook`
`renderHook` isolates a hook for testing by running it inside a tiny, dedicated component. Use it to verify a hook's logic and side effects without rendering a full UI. Footgun: Forgetting to wrap state updates in `act()` can cause flaky, unpredictable tests.
The `act()` Utility: Syncing Tests with React's Updates
The `act()` utility ensures your tests wait for React to finish updating the DOM before you make assertions. Use it to wrap component renders and state updates. The footgun is forgetting to use `await` with an async function, which can lead to flaky tests.
Why-Did-You-Render: Find Unnecessary React Re-renders
The `why-did-you-render` library is a detective for your React app, finding components that re-render unnecessarily. Use it in development to debug performance by spotting when new object or function references break memoization.
React's useMemo Hook: Cache Expensive Calculations
useMemo is React's cache for expensive calculations, preventing re-computation on every render. Use it for heavy tasks like filtering large lists. The main footgun is an incomplete dependency array, which leads to stale, cached data.
useCallback: Cache Functions Between Renders
useCallback caches a function so it's not recreated on every render. This is crucial for performance when passing callbacks as props to memoized components, preventing them from re-rendering unnecessarily.
Immer: Write Mutable Code for Immutable State
Immer lets you write simple, mutable-style code to produce an immutable next state. It's essential in Redux or with React's useState to avoid complex spread operators for deep updates. The footgun: mutations are only safe inside Immer's `produce` function.
Memoized Selectors: Avoid Needless Re-renders
A memoized selector caches its result, re-running only if its inputs from the Redux store change. Use it to compute derived data like a filtered list without triggering needless re-renders.
Redux Saga: Managing Side Effects with Generators
Redux Saga runs side effects in a separate thread-like process. It listens for Redux actions and executes complex async tasks, like API calls, keeping that logic out of your components.
Redux Middleware: Intercepting Actions Before Reducers
Redux middleware is like an Express middleware for your state, intercepting actions before they hit the reducer. It's used for logging, crash reporting, or async API calls. The footgun is forgetting to call `next(action)`, which silently blocks the action.
Redux Toolkit: The Opinionated Way to Write Redux
Redux Toolkit (RTK) is the official, opinionated way to write Redux, bundling best practices to eliminate boilerplate. Use it for any new Redux app to simplify store setup and state updates.
React Redux: Connecting Components to a Global Store
React Redux connects your React UI to a global Redux state store, letting components read data and dispatch updates. It's used to avoid "prop drilling" shared state across the app.
useReducer: Manage Complex State with Predictable Actions
useReducer centralizes complex state logic. Instead of setting state directly, you "dispatch" actions describing what happened. It's ideal for state with many sub-values or when the next state depends on the previous one.
React Context API: Avoid Prop Drilling
React Context is like a global announcement system for a component tree, letting distant children access data without passing it through every intermediate component. Use it for app-wide state like themes or user authentication.
Props Drilling: Passing Data Through Components
Props drilling is passing data through components that don't need it, just to get it to a deeply nested child. It's React's most direct way to share state down the component tree. The footgun: this couples intermediate components to data they never use.
Memoizing List Items with `React.memo`
Wrap list items in `React.memo` to prevent them from re-rendering when their props are unchanged. In a `FlatList`, this stops items from re-rendering just because the list scrolled, keeping the UI smooth. The footgun is assuming it's a free optimization.
Theme Provider Pattern: Centralized UI Styling
A Theme Provider acts like a global style guide, injecting design tokens like colors and fonts into all child components. It's used in frameworks like React to ensure a consistent look and feel. The footgun: components outside the provider won't get the theme.
The Slot Pattern: Making UI Components Composable
The Slot Pattern makes components flexible by defining areas for custom content, like a picture frame for your UI. It's used in Cards or Modals to allow varied content in a consistent frame. The footgun is that too much flexibility can break consistency.
Controlled vs. Uncontrolled Components
A controlled component is a puppet; its parent pulls the strings via props. An uncontrolled one manages its own state. This pattern is key for coordinating siblings, like ensuring only one panel in an accordion is open.
Doc Site Generators: Content-First Websites
A doc site generator turns your Markdown files into a complete, searchable website. Use it for project docs or blogs to focus on writing, not web dev. The footgun is thinking they're only for docs; many are powerful static site generators.
Styled Components: CSS-in-JS as Components
Think of your styles as React components. Styled Components uses JavaScript template literals to write CSS in your JS, creating components with encapsulated styles. It's ideal for building design systems where styles change based on props.
Get React bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.