React & Next.js Vocabulary: 35 Terms Every Frontend Developer Needs

React dominates the frontend landscape, and Next.js has become the go-to framework for production React apps. Whether you are joining a new team, reading a PR, or asking a question in a tech interview, knowing this vocabulary will help you communicate with confidence. This guide covers 35 essential terms, from the basics to the App Router era.

---

Core React Concepts

Component

A component is a reusable, self-contained piece of UI. In React, everything is a component — a button, a form, a full page. Components accept inputs and return JSX (the HTML-like syntax React uses).

“Can you extract that logic into a separate component? It’s getting a bit long."
"The UserCard component is used in three places — make sure your change doesn’t break the others.”

Props

Props (short for properties) are the inputs you pass to a component. They flow from parent to child and cannot be changed by the component that receives them.

“The component is not rendering correctly — check what props you’re passing to it."
"We pass the userId as a prop so the component can fetch the right data.”

State

State is data that a component manages internally. When state changes, React re-renders the component. The most common way to declare state is with the useState hook.

“The dropdown is controlled — it keeps its open/closed state locally."
"Move that state up to the parent if both components need to read it.”

Hook

A hook is a special function that lets you use React features — like state and lifecycle — inside functional components. Hooks always start with use. The most common are useState, useEffect, useContext, useRef, useMemo, and useCallback.

“You can’t call a hook inside a loop — that’s against the rules of hooks."
"We wrote a custom hook to encapsulate the fetch logic.”

useState

useState is the hook for declaring local state. It returns the current value and a setter function.

“I’m using useState to track whether the modal is open.”

useEffect

useEffect runs side effects — data fetching, subscriptions, or DOM manipulation — after render. The dependency array controls when it re-runs.

“The infinite loop is caused by a missing dependency in your useEffect."
"We fetch user data in a useEffect when the component mounts.”

Context

Context provides a way to share values across the component tree without passing props at every level. It is useful for things like the current user, theme, or locale.

“We use context to pass the authenticated user down to deeply nested components."
"Don’t put everything in context — it causes unnecessary re-renders.”

Memoisation

Memoisation (British spelling: memoisation) is the technique of caching a computed value so React skips re-running expensive calculations. useMemo memoises a value; React.memo memoises an entire component.

“Wrap that filtered list in useMemo — it’s recalculating on every render."
"We memo-ised the table row component because the list has hundreds of items.”

Error Boundary

An error boundary is a React class component that catches JavaScript errors in its child component tree and shows a fallback UI instead of crashing the whole page.

“Wrap the widget in an error boundary so a crash there doesn’t take down the whole dashboard.”

Lazy Loading

Lazy loading means loading a component or module only when it is needed, rather than at initial page load. In React, this is done with React.lazy() and Suspense.

“The chart library is heavy — let’s lazy-load it so it doesn’t block the initial render.”

Suspense

Suspense is a React component that lets you display a fallback (like a loading spinner) while waiting for something — lazy-loaded code or async data — to be ready.

“Wrap the lazy component in Suspense and add a loading fallback.”

React Query

React Query (now TanStack Query) is a library for fetching, caching, and synchronising server state in React. It handles loading/error states, background refetching, and cache invalidation automatically.

“We replaced the useEffect + useState fetch pattern with React Query — it handles stale data much better."
"React Query’s invalidateQueries is great for refreshing data after a mutation.”

---

Next.js Core Concepts

SSR (Server-Side Rendering)

SSR means the HTML for a page is generated on the server on every request. The user gets a fully rendered page immediately, which is good for SEO and first paint.

“The product page uses SSR because the price changes frequently and we need it fresh on every request.”

SSG (Static Site Generation)

SSG means pages are pre-rendered at build time. They are served as static HTML — fast and cheap to host — but the data is only as fresh as the last build.

“The blog is SSG — we rebuild whenever a new post is published.”

ISR (Incremental Static Regeneration)

ISR lets you update static pages after they are built, without rebuilding the entire site. You set a revalidate time; Next.js regenerates the page in the background when a request comes in after that period.

“We’re using ISR with a 60-second revalidate so the homepage stays fresh without SSR overhead.”

RSC (React Server Components)

React Server Components run exclusively on the server. They can directly access databases and file systems, and they ship zero JavaScript to the client, reducing bundle size.

“Use an RSC for the data fetching — it never reaches the browser, so the bundle stays small."
"In the App Router, components are server components by default. Add 'use client' only when you need interactivity.”

Hydration

Hydration is the process where React takes static HTML sent by the server and attaches JavaScript event listeners to make it interactive. If the server HTML doesn’t match what React renders on the client, you get a hydration error.

“We’re getting a hydration mismatch — something is rendering differently on the server and the client."
"The component reads localStorage on mount, which causes a hydration error because the server has no access to it.”

App Router

The App Router is Next.js’s routing system introduced in Next.js 13. It uses the app/ directory, supports React Server Components by default, and introduces layouts, loading states, and error boundaries as first-class conventions.

“Are you using the Pages Router or the App Router? The data fetching patterns are quite different."
"In the App Router, you co-locate your loading.tsx and error.tsx right next to your page.tsx.”

Server Actions

Server Actions are async functions that run on the server and can be called directly from client components or forms. They eliminate the need for a separate API route for simple mutations.

“Instead of building a /api/update-profile route, I’m using a server action — it’s much cleaner.”

Middleware

In Next.js, middleware is code that runs before a request is completed. It can redirect, rewrite, or modify requests and responses — commonly used for authentication guards.

“We check the JWT token in middleware and redirect unauthenticated users to the login page.”

---

Performance and Architecture Terms

Bundle

The bundle is the combined JavaScript file that gets sent to the browser. Keeping it small is critical for performance. Next.js automatically code-splits your bundle by route.

“The bundle is too large — check if you’re importing the full lodash instead of individual functions.”

Code Splitting

Code splitting means breaking the bundle into smaller chunks that are loaded on demand, so the browser only downloads what is needed for the current page.

“Next.js does route-based code splitting automatically, but you can do it within a page with dynamic imports too.”

Dynamic Import

A dynamic import (import()) loads a module asynchronously, at runtime rather than at build time. This is the mechanism behind code splitting and lazy loading.

“Dynamic-import the map component — there’s no point loading it unless the user opens the location tab.”

Revalidation

Revalidation is the process of updating cached data. In the App Router, you can use revalidatePath or revalidateTag from a server action to purge the cache for specific data.

“Call revalidatePath('/products') after the mutation so the list shows the new item immediately.”

---

How to Use This in Conversation

Knowing the terms is only half the battle. Here are some real patterns you’ll hear and use:

In code review:

“This hook has a missing dependency — add userId to the useEffect dependency array."
"Can we move the data fetching to an RSC? There’s no reason for it to run on the client.”

In planning:

“Should this page be SSG or SSR? The data changes every few hours, so ISR with a short revalidate window might be the right call.”

In debugging:

“I’m seeing a hydration error. The server and client are rendering different content — probably something to do with window access.”

In stand-up:

“I’m working on extracting the auth logic into a custom hook so we can reuse it across components.”

Fluency with this vocabulary will help you participate fully in frontend discussions — from architecture decisions to PR reviews to on-call debugging sessions.