With a poor understanding of hooks, you get this lingering feeling that you’re missing out on some potential.

If you could just deepen your understanding of your tools, you’d gain another level of productivity.

You could be using a variety of hooks and have the eslint-plugin-react-hooks plugin installed that keeps you on track.

But, there’s something missing. How is this all working?

useState and useEffect are your most fundamental tools in the hooks tool-belt.

And like with all hooks, they follow these two rules:

1. Only Call Hooks at the Top Level
2. Only Call Hooks from React Functions

Why do these rules exist?

Learning the answer to this question is how you’ll deepen your understanding.

And the best way to do that is to jump in and build your own hooks!

In this tutorial, you’ll be recreating useState and useEffect from scratch.

And by the end, your brain will be its own eslint-plugin-react-hooks. Because you’ll know exactly why the rules can’t be violated.

What to expect:

Recreate useState: You’ll be recreating your own version of useState. In the process you’ll learn about how hooks preserve state, and manage component renders.

Support multiple hooks: Learn exactly why hooks must be in a deterministic order and how multiple hooks are managed and persisted.

Recreate useEffect: Finally you’ll apply what you learned to useEffect and learn how React stores the callbacks and diffs the dependency array.