React &amp; Next.js

Props are values a parent supplies to a component, while state is data React remembers for a component across renders. Both influence the UI, but a component should not change its received props directly. State updates request a new render so the screen can reflect the new data.

What causes a re-render? Does it always change the DOM?

Rendering means React calls components to calculate the next UI description. Committing is the later step where React applies needed changes to the host environment, such as the browser DOM. A component can render again without causing any DOM change if the calculated output is effectively the same.

What are reconciliation, Fiber and keys?

Reconciliation is how React matches elements from the previous and next render to decide what to keep, update or replace. Fiber is the internal representation that helps React organize that work. Keys supply identity among siblings, allowing React to preserve the right state as a list changes.

Controlled vs uncontrolled input?

A controlled input takes its displayed value from React state, with changes flowing through an event handler. An uncontrolled input keeps its current value in the DOM until the application reads it. Controlled inputs make coordinated validation and UI changes convenient, while uncontrolled inputs can keep simple forms less state-heavy.

Why should I use a functional state update?

A functional state update supplies a function that receives the pending previous state and returns the next state. It is useful when several updates may be queued or a callback holds an older render's value. React can apply these updater functions in order without each relying on the same captured value.

When should I use useEffect?

useEffect synchronizes a committed component with something outside React, such as a connection, timer or browser event listener. Its setup runs when relevant dependencies change, and cleanup ends the old synchronization. Effects are not the usual place to compute values already available during rendering.

Why does an effect run twice in development or loop forever?

React Strict Mode performs an extra development-only setup and cleanup cycle for effects to reveal missing cleanup. An infinite effect loop is a different issue, usually caused by updating state that keeps changing an effect dependency. Understanding the trigger helps fix the design rather than masking the behavior.

useRef vs useState?

useState stores a value that participates in the UI, while useRef stores a stable mutable container whose changes do not request rendering. A ref is useful for an imperative handle such as a DOM node or timer ID. It should not replace state for information that the screen must show when it changes.

useMemo vs useCallback?

useMemo caches a calculated value between renders until its dependencies change. useCallback preserves a function reference under the same dependency idea. They can reduce repeated work or unstable props, but memoization is an optimization rather than a correctness guarantee.

When do I use Context, useReducer or a custom hook?

Context shares a value with descendants without passing it through every intermediate component. useReducer organizes state changes through actions and a reducer, while custom hooks extract reusable stateful logic. These tools address distribution, transition structure and reuse respectively; they are not interchangeable state stores.

React & Next.js·State & performance

Local state vs Redux/Zustand vs server state?

Local state belongs to a nearby component, a client store coordinates shared UI data, and server state represents data owned by a remote service. Server-state tools manage freshness, fetching and invalidation because the browser is only keeping a cached copy. Choosing the owner first prevents duplicated and conflicting sources of truth.

React & Next.js·State & performance

How do I make a slow React page faster?

Frontend performance includes initial loading, responsiveness during interaction and the cost of updating the UI. A slow page might be waiting for JavaScript, network data, layout or expensive component calculations. Profiling tells you which category matters before you make a targeted change.

App Router vs Pages Router?

Next.js provides two routing systems: the Pages Router organizes page files, while the App Router uses nested route segments, layouts and React Server Components. They have different data-fetching and rendering conventions. Knowing which router a project uses prevents mixing APIs and assumptions from different architectures.

Server Component vs Client Component?

A Server Component runs in the server environment and does not ship its component implementation to the browser as interactive JavaScript. A Client Component is part of a client boundary and supports state, effects and browser events. In Next.js, Client Components can still contribute server-generated HTML on the initial load, so client does not mean browser-only rendering.

SSR vs CSR vs SSG vs ISR?

SSR, CSR, SSG and ISR describe when and where page content is generated. SSR renders for requests, CSR builds UI in the browser, SSG generates static content ahead of requests, and ISR refreshes generated content after deployment. The choice trades freshness, server work, cacheability and initial loading behavior.

What are streaming and Suspense?

Streaming sends ready parts of a response while slower parts are still being prepared. Suspense defines a boundary that can show fallback UI while compatible child work is pending. Together they let users see useful content sooner instead of waiting for the slowest section to finish.

Route handler vs Server Action vs middleware/Proxy?

Route handlers expose HTTP endpoints, Server Actions provide server-side functions for mutations, and middleware/Proxy can intercept requests for routing behavior. They are different entry points with different responsibilities. An action or handler exposed through the app must still validate input and enforce access near the protected work.

How should caching and revalidation work?

Caching saves a previously computed or fetched result so it can be reused, while revalidation refreshes or invalidates that stored result. A cache design needs a key, a freshness rule and a plan for changes. In Next.js there can be several caching layers, so one invalidation mechanism may not describe every layer's behavior.