Member-only story
React Hooks — A Conceptual Overview
Before we start talking about React hooks at all, I wanted to first answer the question — what are hooks? As a general concept hooks are interfaces that allow us to ‘hook in’ to an event or component of a system, and allow us to add or modify that systems behavior.
Callbacks are often used to hook into abstracted methods, allowing the author of that method to leave space for the user of the function to customize the execution of it later.
In the example below, we give the function user two different methods that they can use to ‘hook’ into the execution of this method: beforeCallback, which executes after the primary computation is complete, and afterCallback, which… well, you know 😄. In real life situations this might be significantly more complex, but the concept is still fairly similar.
In React, the function that you are hooking into with your hooks is the rendering cycle of a react functional component. A simple one might look like this:
