React Hooks: Revisited

Originally published at mihail-gaberov.eu.

Intro

Some time ago, before ↪️ React Hooks ↩️ ️️were officially released, I have written another article about them. It was an attempt to learn and explain this new feature. Now, when they are officially part of the last React releases, I have decided to revisit them and try to present better examples of their usage.

Why

Right after my first presentation, I’ve received some very useful comments by a colleague of mine. Comments regarding the presentation and the examples, and advice of how I can do better. I kept these comments in my email for some time. And today I will try to follow them, so we can get better understanding about this feature, which now can be used in any new or existing project.

Show Time

Since we have covered the theory behind the hooks last time (and there are a lot of nice explanations on the subject out there now), I don’t plan to repeat it here. What I plan is to start directly with examples, but to strive to keep them as clear and focused as possible. 🐽

Example 1:

In this example we will take a closer look at the two of the most important built-in hooks — useState and useEffect.

📌 State Hook — useState()

📚 Theory — this is just to remind us what is this hook meant to be used for and then we will see how to use it below. What React documentation say is: “ one of the Hooks provided by React is called **_useState_**. We’re also sometimes going to refer to it as the “State Hook”. It lets us add local state to React function components”. This means that whenever we need to manipulate our component state, we can go for **_useState_** hook.

👉 Practice — you can see

📌 Effect Hook — useEffect()

📚 Theory — this is just to remind us what is this hook meant to be used for and then we will see how to use it below. What React documentation say is: “ The Effect Hook lets you perform side effects in function components. Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects”. This means that whenever we need to perform some side effect or use a result returned from such, we should go for **useEffect** hook.

Here is an example in which we will see what are the differences when we use this hook with one parameter and with two parameters. We also will see what happens if we provide a return value for the first param.

👉 Practice — you can see

If you want to go really deeper into this, here Dan Abramov posted A Complete Guide to useEffect. It’s a really long article, but it’s worth it.

Example 2

In this example we will take a closer look at the custom hooks and how can we use one.

📌 Custom Hook (e.g. usePictures)

📚 Theory → as we remember from the last time, custom hooks are exactly what the name implies. Hooks that we can create by our own and we can use built-in hooks in them. Or simply said — our own functions that can benefit from React built-in hooks. In the example below, we will see how to create such and use it in combination with previously mentioned hooks. For instance, how can we fetch a 3rd party REST API and do something with the result. 💻

👉 Practice — you can see live example here and the code for it here.

Conclusion

In the end of this brief retrospection, we could refresh our memories by mentioning some of the key things we need to keep in mind, when using React Hooks.

Hooks don’t remove classes — we still can use classes if we want or need them.

Hooks rules — we must follow them when using hooks:

☙ Only Call Hooks at the Top Level — this basically means that we must not call hooks (yes, remember, hooks are functions and we can call them) inside loops, conditions and nested functions. And we must follow the order in which Hooks are called. Note that you don’t need to worry about this problem if you use the provided lint rule.

☙ Only Call Hooks from React Functions — this means we are not suppose to call Hooks from regular JavaScript functions. Instead, we should be calling them only from React function components or custom Hooks.

I hope this article helps you feel more confident when using React Hooks. 😏

🔥 Thanks for reading! 🔥