Easy everything in React & Next.js, page 3
How does children work, and why is it fundamental to composition?
Tests React composition knowledge. Good answer: children is a prop holding nested JSX; a Card wrapper renders {children} to let parents inject markup; contrast with prop-driven text. Red flag: calling children magic syntax instead of a standard prop.
What is prop drilling in React?
Define it as threading props through middle layers; give a three-layer example like a theme toggle; cite useContext.
![Explain useEffect dependency array behavior for [], [deps], and omitted](/_next/image?url=https%3A%2F%2Freact.dev%2Fimages%2Fog-reference.png&w=1600&q=75)
Explain useEffect dependency array behavior for [], [deps], and omitted
It tests reactive dependency tracking. Omitting re-runs every render; [] runs on mount with cleanup on unmount; [deps] re-runs when Object.is detects change. Red flag: claiming [] means 'run once' without mentioning cleanup or stale values.
How do you use useState to track user input?
Initialize with useState at top level, bind input value to state, and update via onChange using setter.
What are the two main ways to define a component in React?
Tests fluency in function and class syntax. Outline: show a function returning an h1; show a class with render() returning an h1; note functions are the React 19 default. Red flag: offering arrow vs function declaration as the two ways, or omitting render().
Explain props in React and how parent components pass data to children
Define props as the single object argument; show destructuring; stress immutability and downward flow; note defaults.
React Hydration: Bringing Server HTML to Life
Hydration turns static, server-rendered HTML into a fully interactive React app. It's the core of Server-Side Rendering (SSR), where the client "wakes up" the initial HTML by attaching event listeners.
Next.js Environment Variables: Server vs. Browser
Next.js environment variables separate server secrets from public browser config. Use them for API keys or database strings. The key footgun is exposing secrets by forgetting to prefix browser-accessible variables with NEXT_PUBLIC_.
Vercel: The Frontend Cloud Platform
Vercel turns your Git repo into a live, globally-scaled app. It's a CI/CD pipeline, server, and CDN in one, ideal for deploying Next.js apps with automatic previews for every PR.
JSON Web Tokens (JWTs): Stateless API Passports
A JWT is a digitally signed passport for your web session, letting a server verify your identity without a database lookup on every request. It's used for stateless API authentication. The footgun: its payload is readable, so never store secrets there.
Auth.js: Authenticate with Custom Credentials
The Auth.js Credentials provider lets you authenticate against your own system, like a user database. It's for when OAuth isn't an option and you need full control. The footgun: you are entirely responsible for the security of the login logic.
Optimize Loading with next/script
The next/script component prevents third-party scripts from blocking your page's initial render. Use it for analytics, ads, or chat widgets to improve performance. The footgun is not choosing the laziest strategy possible for non-essential scripts.
next/font: Zero Layout Shift Fonts
next/font bundles fonts with your app at build time, serving them from your own domain to eliminate layout shift and extra network requests. It's the standard for any Next.js app. The footgun is using <link> tags, which negates all benefits.
Next.js `next/image`: Stop Shipping Giant Images
The next/image component is an automated image pipeline, not just an <img> tag. It resizes, optimizes, and serves modern formats like WebP, improving load times. The footgun is forgetting to provide width and height, causing layout shifts.
NextResponse.json(): The Standard for API Responses in Next.js
NextResponse.json() is the standard way to send JSON from Next.js Route Handlers, like Express's res.json(). Use it in app/api routes to return data; it automatically sets the correct headers.
Next.js Route Handlers: One File, Multiple Methods
Think of a Next.js Route Handler file as a dedicated API endpoint. You handle different HTTP requests by exporting functions named GET, POST, DELETE, etc. Use them to build API routes for form submissions or to fetch data for client-side components.
Next.js Extends `fetch` for Server-Side Caching
Next.js extends the standard fetch API to control server-side caching and revalidation. In Server Components, pass options like next: { revalidate: 3600 } or tags to manage how data is cached. This extension is server-only and ignored in browsers.
'use client': The Boundary Between Server and Client
'use client' marks where server-only rendering ends and browser interactivity begins. Use it for components with state (useState), effects (useEffect), or event listeners (onClick), enabling them to run in the browser.
next.config.js: Your Next.js App's Control Panel
Think of next.config.js as your app's control panel, letting you change Next.js's default behavior. Use it for redirects, environment variables, or image optimization. The biggest footgun: you must restart your dev server after making any changes.
Next.js Route Groups: Invisible Folders for Routes
Route Groups are invisible folders for your Next.js routes, letting you organize files without changing the URL. Use them to apply a specific layout to a set of pages, like a marketing section vs. a user dashboard.
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