React & Next.js

Reusable UI building block in React; a function that accepts props and returns JSX.

"We extracted the user avatar into a reusable component so every page renders it consistently."

Function starting with 'use' that lets functional components access state and lifecycle features.

"Instead of a class component, we wrote a custom hook to encapsulate the data-fetching logic."

Hook that returns a state variable and a setter function; re-renders the component when the setter is called.

"We called useState(false) to track whether the modal is open, then toggled it on button click."

Hook for side effects: data fetching, subscriptions, and DOM updates; runs after render and optionally on dependency changes.

"useEffect fires after the component mounts, so we fetch the user profile there and store it with useState."

Hook that memoises a function reference to prevent unnecessary re-renders of child components that depend on it.

"Wrapping the onClick handler in useCallback stopped the child list from re-rendering on every keystroke."

Hook that memoises an expensive computed value; recomputes only when its dependencies change.

"We wrapped the filtered-and-sorted product list in useMemo so it only recalculates when the raw data changes."

React component that renders on the server; zero JavaScript is sent to the client for that component.

"The product listing page is a Server Component — it fetches from the database directly and ships only HTML, with no client bundle overhead."

Component marked 'use client' that runs in the browser; required for event handlers, hooks, and browser APIs.

"We added 'use client' to the search bar because it needs onChange handlers and local state for the query string."

The process of attaching JavaScript event handlers to server-rendered HTML so the page becomes interactive in the browser.

"After hydration completes, the static HTML the server sent is now a fully interactive React app in the browser."

Next.js 13+ routing system based on the file system in the app/ directory; supports layouts, Server Components, and streaming by default.

"We migrated from pages/ to the App Router to take advantage of nested layouts and Server Components without extra configuration."

Async function marked with 'use server' that runs on the server and can be called directly from a Client Component or a form.

"The form's submit handler calls a Server Action that validates input, writes to the database, and revalidates the cache — no API route needed."

React boundary that shows a fallback UI while a child component waits for async data to be ready.

"We wrapped the comments section in <Suspense fallback={<Spinner />}> so the rest of the page renders immediately while comments load."

Sending HTML in chunks so the browser can paint earlier parts of the page before the full server response has arrived.

"With streaming SSR, the page header and navigation appear in under 100ms while the slower data-heavy sections stream in afterwards."

Shared UI wrapper in Next.js App Router defined in layout.tsx; persists across route transitions without re-mounting.

"We put the sidebar and top nav in the root layout so they stay mounted during client-side navigation between pages."

Function that runs on the edge before a request is completed in Next.js; used for authentication, redirects, and A/B testing.

"Middleware checks the session cookie on every request to /dashboard and redirects unauthenticated users to /login."