React & Modern Frontend (445 Qs)•Part 1: Core React, JSX & Component Architecture (1 - 77)
Do Hooks replace render props and higher order components?
Both render props and higher-order components render only a single child but in most of the cases Hooks are a simpler way to serve this by reducing nesting in your tree.
Practical Code Example
jsx
// Custom Hooks replace verbose Render Props and HOCs:
// Before (HOC): withWindowSize(Component)
// Modern (Hook):
function ResponsiveHeader() {
const { width } = useWindowSize(); // Clean, reusable custom hook!
return <h1>Viewport: {width}px</h1>;
}