Advanced hooks and patterns React Questions
Master advanced hooks and patterns react interviews with our comprehensive collection of 7 questions and challenges.
Use useRef to create a mutable reference that React attaches to a DOM node after mount. Access the node via ref.current inside useEffect, not during render. Use callback refs to measure elements and forwardRef to expose a child component's DOM node to a parent.
useEffect with an empty dependency array replaces componentDidMount. With a dependency array it replaces componentDidUpdate for specific values. With a cleanup return it replaces componentWillUnmount. React.memo replaces shouldComponentUpdate. useLayoutEffect replaces getSnapshotBeforeUpdate.
A controlled component has its value driven by React state. An uncontrolled component lets the DOM own the value, read via a ref on submit. Controlled enables real-time validation and formatting. Uncontrolled is mandatory for file inputs and is used by React Hook Form for performance.
A HOC is a function that takes a component and returns an enhanced version with added behavior. Every HOC must spread {...props} to avoid swallowing parent props, set displayName for readable DevTools output, and use React.forwardRef for ref forwarding. HOCs are largely superseded by custom hooks but remain correct when you need to intercept rendering.
Custom hooks extract stateful logic into reusable functions. The use prefix enforces Rules of Hooks via the linter. Return a named object, not a tuple, for non-breaking extensibility. Add AbortController cleanup to prevent race conditions when the URL dependency changes.
React Portals render a component into a DOM node outside the React root. This lets modals, tooltips, and dropdowns escape overflow:hidden and z-index constraints in the parent tree while remaining in the React component tree for event bubbling and context access.
Render props invert rendering control by passing state through a function call. HOCs operate at the component definition level and inject behavior via wrapped props. Both are superseded by custom hooks for logic sharing, but remain the right choice in specific scenarios.