Modern React (Hooks, Server Components, Next.js)
Definition
Modern React is the current idiom of the React ecosystem: function components with hooks, React Server Components (RSC), streaming rendering, and full-stack frameworks such as Next.js and Remix. It replaces the older class-component and SPA-only patterns with a model where components can run on the server, data fetching is co-located, and TypeScript is standard.
Why it matters for AI jobs
Most AI companies build their user-facing products with React + TypeScript, usually on Next.js. Interviews test hooks fluency, data-fetching patterns, and performance thinking rather than legacy patterns. If your React experience predates hooks (2019) or server components (2023), refreshing it is essential to pass full-stack interviews at AI companies.
Key concepts
- Hooks —
useState,useEffect,useMemo, custom hooks; rules of hooks and dependency arrays. - React Server Components — components that render on the server with zero client JS; the client/server boundary.
- Next.js App Router — file-based routing, layouts, server actions, streaming with Suspense.
- Data fetching — TanStack Query / SWR on the client, or fetch-in-RSC on the server.
- State management — local state first, then Zustand/Jotai; Redux only for legacy code.
- Performance — memoization, code-splitting, the React Compiler, Core Web Vitals.
- Streaming AI UIs — rendering token streams from LLM APIs (e.g. Vercel AI SDK patterns).
Learning path
- Re-learn idiomatic hooks by building a small app without any framework (Vite + React + TypeScript).
- Do the official Next.js App Router tutorial and understand where each component runs.
- Build an AI chat interface that streams responses from the Anthropic or OpenAI API — the canonical AI-company portfolio piece.
- Add TanStack Query, optimistic updates, and error boundaries to make it production-grade.
- Measure and fix Core Web Vitals with Lighthouse; know how to discuss the trade-offs in interviews.