Rethinking Components with React Hooks

Tram Ho

Article translated from source:

React Hook has been around since React 16.8 and is still popular and loved more than ever. They have introduced a completely new way of handling components in React, which can cause you to reevaluate your approach to code at a basic level. Set up as the most popular frontend framework according to Stackoverflow popularity polls, React went beyond Hook’s introduction.

At first glance, React Hook seems like a replacement for classes or even a complete replacement. Many people have expressed that opinion, however, it is wrong. React Hook has no comparable way to classes. The concept is different, as is perception, so what may look similar, is a completely new concept when it comes to reality.

With Hook, there is a need for a declarative approach with its rigorous mathematical logic. In the new release, React changed its approach to function programing, leaving OOP unnoticed. This presents itself in several ways. Function now plays an important role in React, moving dependencies out of classes. As a result, we have a completely different rendering method, which we will illustrate with the following examples.

Let’s start with classes. We define a component whose value starts with 0 and also uses componentDidMount to set a timeout when the status reaches 5000.

Our component is a button that will return clicks per render, triggered by a state change. With each click the value changes to value + 1.

This global object in component (class) is a singleton with state links in all cases. It will be the same for each render, meaning that if you open the page and click the button a few times, the number that appears in the console will tell you exactly how many times you clicked on the button. This gives the render reference to a single object.

With Hook, the result will be quite different and more like the functions in JS. On each render, a new environment will be created, so each time you will get a new set of data.

Let’s look at an example. We set the initial state to 0 with the help of useState Hook.

We then use the useEffect hook to set the timeout when the number of clicks reaches 5000. In the previous example, we achieved this using componentDidMount .

Again, we will count the number of button clicks with each click in one status click turning to value + 1.

React accounts for all changes in the state Hook, calling the function component every time it renders. This means that all variables and functions are closed and therefore different on each render.

In fact, what that means, if we take the same example, but show it with React Hook, when you click the button while the rendering is going on, you’ll get a zero at the output. . On each render, state and useEffet will be different.

This is something worth learning and using in your code. If you are still unsure about the reason for this change, learn more about React Hook and the reason behind their introduction. You will find that Hook is a great addition to React and once you start using them, you will immediately reap the benefits.

Thanks and hope the article is useful in your work.

Share the news now

Source : Viblo