Advanced React Interview Questions

Create a Custom Hook

Build a custom hook that tracks the online/offline status of the browser.

Expected output: A hook returning a boolean indicating online status.

Hint: Use the 'online' and 'offline' window events and useState/useEffect hooks.

Optimize Context Usage

Refactor a React app to split a large context into multiple smaller contexts to improve performance.

Expected output: Reduced unnecessary re-renders when context data changes.

Hint: Identify unrelated data and create separate contexts for each.

Hooks must be called at the top level of a React function component or custom hook and never inside loops, conditions, or nested functions.

The dependency array tells React when to re-run the effect. An empty array runs it once after mount, omitting it runs after every render, and specifying variables runs when those variables change.

Memoize the context value with useMemo, split context into smaller contexts, and use React.memo on consuming components to avoid unnecessary re-renders.

A custom hook is a reusable function that encapsulates stateful logic using React hooks, allowing code reuse and cleaner components.