React & Next.js
Rendering, hooks, state ownership, performance, and server boundaries.
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.
Difficulty is an editorial estimate. Completion means you chose to mark a question as understood.