title: React Hooks - What's happening under the hood?
body: <p>I've been trying out React Hooks and they do seem to simplify things like storing state. However, they seem to do a lot of things by magic and I can't find a good article about how they actually work.</p>
  
  <p>The first thing that seems to be magic is how calling a function like useState() causes a re-render of your functional component each time you call the setXXX method it returns?</p>
  
  <p>How does something like useEffect() fake a componentDidMount when functional components don't even have the ability to run code on Mount/Unmount?</p>
  
  <p>How does useContext() actually get access to the context and how does it even know which component is calling it?</p>
  
  <p>And that doesn't even begin to cover all of the 3rd party hooks that are already springing up like useDataLoader which allows you to use the following...</p>
  
  <pre><code>const { data, error, loading, retry } = useDataLoader(getData, id)
  </code></pre>
  
  <p>How do data, error, loading and retry  re-render your component when they change?</p>
  
  <p>Sorry, lots of questions but I guess most of them can be summed up in one question, which is: </p>
  
  <p><strong>How does the function behind the hook actually get access to the functional/stateless component that is calling it so that it can remember things between re-renders and initiate a re-render with new data?</strong></p>