title: React: Do Hooks Replace HOCs and Render Props?
body: <p>From the <a href="https://reactjs.org/docs/hooks-faq.html#do-hooks-replace-render-props-and-higher-order-components" rel="noreferrer">React Hooks FAQ</a>, we learn that hooks can replace HOCs and Render Props that return/render a single component.</p>
  
  <p>I was trying to understand this a bit better, and why it is a fact.</p>
  
  <p>Let's look at HOCs first:</p>
  
  <p>A HOC is a function that takes a component as an argument, wraps it in surrounding logic like effects and state, and returns a new component. How exactly would a custom hook replace that? We still need the function that wraps an input function with other logic.</p>
  
  <p>Looking at render props:</p>
  
  <p>A render prop is a component we pass as a prop to another component, that then renders the passed component with some new props. I guess we can replace that with hooks by creating a custom hook that returns a full component, then use that hook in any needed component. So a parent does not have to pass a component as a prop to it's child. Is that how hooks would replace Render Props?</p>
  
  <p>An explanation, preferably with code example(s), on how hooks can replace HOCs and Render Props in their most common use cases would be deeply appreciated.</p>