Скачать или смотреть How to use hooks with React JS in 2021 (+ an example of calling an API with Axios and Next JS)

Today we’re going to look at :
why we need React hooks,
how to use them,
and what are the main React hooks to master

And we’re going to set up a step by step basic example to use hooks to call an API

Now, React is - at the time of recording this video - up to version 17. Hooks only appeared in version 16.8 in February 2019, so they are a fairly recent thing. However, they are also in my opinion (and in the opinion of just about everybody) a good thing. Why? because they give our code superpowers and make it more fun. Because they make our code easier to read, faster to develop in. Now, does that work?

Well, in the old days (that is before 2019) the React components were built with classes. The big question around different frameworks (Vue, Angular, React) is always: what do you do with the state of your application? I mean we don’t need javascript frameworks to print out HTML, PHP has been doing that just fine since the last century. The point of javascript frameworks is to manage application logic (and I’d even say: game logic)
How? Well, using classes was a logical way of doing things, just lump everything together: the state, the logic, the HTML render.

And normally, we can’t manage the state with only a function, any local variables you define within a function are lost when you exit the function. A function is like a gadfly, it lives, it dies, and everything in between it forgets.

But Hooks allow us to leave the heavy lifting of state management to the framework.

And leaving out the boring, repetitive stuff means that our code is streamlined, more readable, and means we can just focus on the fun stuff, on how we want our application to 1/ look and 2/ behave.

It means that when we write a component, we just need to write ONE function, that function just gets the state, the calling variables, and renders the HTML we want to show.

So like I said, React hooks are cool because they give our code superpowers and superpowers are fun.

But of course, with great power comes great responsibility. To work well, these hooks, these superpowers need to be used in a specific way.

The magic of hooks has one simple requirement, and one requirement only. That requirement is that the hooks inside a function all be called in exactly the same order every time the function is called.

This means that they should not be behind a condition, for example.

The second thing to note is a convention, the names of hooks all start (or should at least) with “use”. So useState, useEffect, useTranslation, useQuery, or as my mum kept reminding me: useYourHead.

And the idea of hooks and this naming convention is that hooks use features and pull them into the function.

Now that’s out of the way, let’s look at the different hooks, what they do, and how to use them. Now there are a number of hooks, and you can actually write your own fairly easily, but that is a subject for another day. We’ll be looking at the 3 core hooks, that are the most useful :
useState → to manage state
useEffect → to create side effects
useContext → to share data throughout an app,

Now, in my daily work I often also have the useTranslation hook from the i18next library, for localising apps, and the useQuery and useMutation hooks from Apollo for querying a GraphQL backend. Let me know if you’re interested in learning more about how those work.