React & Next.js Ecosystem

A React architecture where components render exclusively on the server, with their output (not their JavaScript) sent to the client — reducing bundle size and enabling direct server-side data access.

"Our ProductList component is an RSC — it fetches from the database directly without an API call, and zero KB of its code ships to the browser, cutting our JS bundle by 34%."

A React hook that memoizes a function — returning the same function reference between renders unless its dependencies change. Used to avoid re-creating callback functions on every render.

"Wrapping handleSubmit in useCallback([formData]) prevents the child form's re-render on every parent update, since the child uses React.memo and equality-checks its props."

A React hook that memoizes a computed value — recalculating it only when specified dependencies change. Unlike useCallback (for functions), useMemo memoizes the return value of a computation.

"useMemo(() => expensiveSort(items), [items]) ensures the sort only reruns when the items array changes — not on every render that causes the parent to re-render."

A React component that renders a fallback UI while waiting for its children to finish loading — triggered by async operations like lazy-loaded components, data fetching with frameworks, or async RSCs.

"<Suspense fallback={<Skeleton />}><UserDashboard /></Suspense> shows the skeleton while the RSC is streaming — when the data is ready, React swaps in the real component without a full page reload."

A React API that marks a state update as non-urgent — allowing React to interrupt it to handle more pressing updates like user input. Used to keep UIs responsive during expensive state changes.

"Wrapping the search results update in startTransition(() => setQuery(input)) lets React defer re-rendering the expensive results list while the user is still typing — eliminating input lag."

Async functions marked with "use server" in Next.js that execute exclusively on the server but can be called directly from Client Components — enabling form submissions and mutations without building a separate API route.

"Our checkout form calls a Server Action directly: async function placeOrder(formData) { 'use server'; await db.orders.create(...) } — no API route needed, and the mutation runs server-side with full database access."

The process of attaching React's JavaScript event handlers and state to server-rendered HTML, making the page interactive after the initial HTML load.

"The page renders fast because we SSR the HTML, then hydration attaches the click handlers — but if hydration is slow (large JS bundle), users see a non-interactive page during the gap."

A data-fetching strategy and React hook library where cached (stale) data is returned immediately while a fresh fetch happens in the background — trading consistency for instant UI response.

"With useSWR('/api/user'), the cached user profile renders instantly from cache, then the component silently updates when the fresh fetch completes — users never see a loading state for navigating between pages."

A library for managing server state in React applications — providing caching, background refetching, pagination, optimistic updates, and synchronisation out of the box.

"useQuery(['todos', userId], fetchTodos) gives us automatic caching, loading/error states, and background refetching — replacing 150 lines of manual state management with a 5-line hook call."

A Rust-based incremental bundler designed as a successor to Webpack, built for Next.js — optimised for incremental builds that only reprocess changed files.

"Switching to Turbopack in development cut our hot module replacement (HMR) from 4.2s to 340ms for our 800-component application — the incremental architecture only rebuilds what changed."