reactadvanced
React Design Patterns
HOC, Render Props and custom Hooks
7 questions
By EZ4Code Team
1. What is a higher-order component (HOC) essentially?
A function that takes a component and returns a new component
A React component
A Hook
A Context
Explanation: An HOC is a function: Component => EnhancedComponent, used to reuse component logic, such as withRouter, connect.
2. What is the Render Props pattern?
Sharing logic by passing a function that returns a React element via a prop
Passing a string prop
Using HOC
Using Context
Explanation: Render Props shares component internal state/logic via a prop whose value is a function (such as render={data => <Comp data={data} />}).
3. What is the naming convention for custom Hooks?
Must start with use
Must end with hook
Any name
Must start with a capital letter
Explanation: Custom Hooks must start with use (such as useFetch); this is the convention for React to identify Hooks and apply lint rules.
4. What is the advantage of custom Hooks over HOC?
No nesting hell, more intuitive, does not increase component hierarchy
Always better performance
Can replace all HOCs
Does not need to follow Hook rules
Explanation: Custom Hooks reuse state logic without increasing component nesting, avoiding the wrapper nesting hell of HOC, with better readability.
5. What is the common pattern for forwarding props in an HOC?
Spreading {...props} on the inner component in the HOC
Dropping unrecognized props
Only passing specific props
Not passing any props
Explanation: An HOC should be transparent, passing props unrelated to the HOC via {...this.props} to the wrapped component, avoiding prop loss.
6. What is the difference between controlled and uncontrolled components?
Controlled component value is controlled by React state; uncontrolled is managed by DOM (ref)
They are identical
Controlled uses ref
Uncontrolled uses state
Explanation: Controlled components are driven by state via value + onChange; uncontrolled components use defaultValue + ref to let the DOM maintain internal state.
7. What does React.memo do?
Memoizes a component with shallow prop comparison, skipping render if props are unchanged
Caches functions
Caches values
Declares side effects
Explanation: React.memo is a higher-order component that shallow-compares props; if same as last time, it reuses the last render result, optimizing performance; use with useMemo/useCallback.