Advanced concepts in React & Next.js
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.
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().
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.
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.
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.
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.
React Theming: Context API and CSS-in-JS
Use React's Context API to inject a theme object (colors, spacing) into your component tree for your CSS-in-JS styles. It's ideal for light/dark modes or brand skins. The footgun: this pattern fails in React Server Components, which lack context.
SSR for Styles: Avoiding the 'Flash'
Server-side rendering for styles sends a fully styled page on the first load, preventing the dreaded "flash of unstyled content" (FOUC). This is crucial for CSS-in-JS libraries. The footgun is assuming it works automatically without proper setup.
Protected Routes: Server Gates, Not Hidden Links
A protected route is a server-enforced gate, not a hidden link. In Next.js, middleware or server components validate sessions before HTML ships, which matters for dashboards and billing.
useFormState (now useActionState): State for Actions
useActionState (formerly useFormState) lets you update state from an async Action. It returns the action's result, a dispatch function, and a pending status. Use it to manage form UI for loading states and validation messages from Server Actions.
React's useFormStatus: Read Form State from a Child Component
The useFormStatus hook lets a child component read its parent form's submission status without prop drilling. Use it to disable a submit button or show a loading spinner from within a reusable component.
React Refs: An Escape Hatch for DOM Manipulation
A ref is an escape hatch to directly access a DOM node, bypassing React's declarative state flow. Use it for imperative actions like focusing an input or scrolling to an element. The footgun: overusing refs can conflict with React's rendering.
Measure Component Render Costs with <Profiler>
React's <Profiler> is a stopwatch for your components, measuring render times programmatically. Wrap any UI tree to log detailed performance metrics on every update, helping you pinpoint slow renders. The footgun: It's disabled in production by default.
ISR: Static Speed with Dynamic Freshness
ISR offers the speed of a static site with the freshness of a server-rendered one. It serves a cached page, then regenerates it in the background after a set time, making it ideal for blogs or e-commerce sites.
State Normalization: Treat Your Store Like a Database
Treat your Redux state like a database. Instead of nesting related data, flatten it into separate 'tables' keyed by ID. This simplifies updates and prevents unnecessary re-renders. The footgun is storing API data as-is, creating update bugs.
SSR State Hydration: Syncing Server and Client State
SSR hydration syncs server and client state to prevent UI errors. The server renders the page with initial data, then sends that data to the client to "hydrate" its own state store. The footgun is using a global store on the server, which leaks data.
RTK Query: Your Redux Data Fetching Layer
RTK Query treats server data as a cache, not global state, handling fetching and loading states for you. Use it to replace manual fetch logic and keep data fresh across components. Forgetting to call setupListeners disables automatic refetching.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles