Performance optimization React Questions

Debouncing delays execution until a user pauses. Build a useDebounce hook with setTimeout and clearTimeout cleanup in useEffect. Use it for search inputs that fetch from an API. Do not debounce client-side filtering — use derived state instead.

React.lazy wraps a dynamic import() so the component code is fetched only when first rendered, not included in the initial bundle. Suspense shows a fallback during the load. Always pair with an ErrorBoundary to handle chunk load failures. React.lazy requires default exports.

PropTypes validate prop types and required props at runtime in development, logging console warnings on violations. In TypeScript projects, PropTypes are superseded by interface declarations and compile-time checking. Know what each serves: PropTypes = runtime dev warnings, TypeScript = compile-time safety.

A pure component skips re-rendering when its props and state are shallowly equal to the previous render. PureComponent is the class equivalent; React.memo is the function component equivalent. Both perform shallow equality checks — object and function prop references must be stable or the optimization is bypassed.

React.memo skips re-rendering a component when props are shallowly equal to the previous render. Inline objects and function props silently defeat it — pair with useMemo and useCallback on the parent side. Profile first; memo adds comparison overhead and should be applied surgically.

useMemo caches the return value of a factory function and recomputes only when listed dependencies change. It prevents unrelated state changes from re-triggering expensive computations. It does not make a slow computation fast — when the dependency that drives the expense changes, the work runs regardless.

useMemo caches a computed value; useCallback caches a function reference. useCallback(fn, deps) is equivalent to useMemo(() => fn, deps). useCallback without React.memo on the child adds overhead with no benefit. Both require an accurate dependency array to avoid stale closures.

React Fiber replaces the synchronous call-stack reconciler with interruptible work units. Concurrent Mode (via createRoot) exposes this as priority scheduling: startTransition marks updates as non-urgent so React can pause and prioritize user input. startTransition does not move work off the main thread.

React.lazy wraps a dynamic import() to split a component into its own chunk. Suspense catches the pending state and renders a fallback. Pair with an ErrorBoundary for chunk load failures. React.lazy requires default exports — adapt named exports with a .then() wrapper.

React re-renders a component when its state changes, its props change, or its parent re-renders. The third trigger cascades through entire subtrees by default. Reconciliation limits DOM mutations. Memoization prevents component function calls. Profile before optimizing.

useCallback memoizes a function reference so child components wrapped in React.memo skip re-rendering when the parent re-renders. Without React.memo on the child, useCallback adds overhead with no benefit. The dependency array must include every value the callback closes over.