All About React Hook

React Hooks

React Hooks is the latest addition to the React ecosystem, starting with React 16.8. The basic form of React Hooks allows you to use stat and other react features without typing a class. So will it replace the class-based elements in the response? See you soon. First, let’s try to understand the reason for having such a feature, and then let’s understand the basic concepts and terminology associated with React Hooks, finally, let’s dive deeper into its core concepts and uses.

Why the React hook?

According to React official documentation, they have listed several reasons for the introduction of this React hook in the React ecosystem. E.g.

It is difficult to reuse state arguments between elements.

If you have a good level of reaction experience, you may come across situations where you want to treat your components reusable, you can use feedback concepts like height order material or render props to achieve such behaviors. But sometimes for these ideas you need to do additional refactoring on your existing components or in your entire application code, some kind of nightmare. Even if you solve this problem using the ideas mentioned above, you will encounter a new problem called “rapper hell” (you can use the feedback tool to detect it). After facing such problems repeatedly, the feedback team has solved them by introducing us to create our own custom hooks, which will be discussed later in this article series.

Complex elements become difficult to understand

I guess we have all used this componentdidmount and component will unmount together at least once to achieve some side effects in component mount and unmount situations. But if you look at all these function codes, you will notice that every life cycle method often has a mixture of unrelated arguments. For example, in your componentDidmount, you can call some external API to fetch some data and connect some listeners for certain events, and in componentWillmount, you will disconnect those listeners and do some extra cleaning work if you see each of these methods, they Completely unrelated to. In software engineering, this phenomenon is considered a violation of the sole responsibility policy, which is a bad practice.

But even if we want to refactor such systems into multiple other smaller functions, we may not be able to do so at times, because we have state logic in those methods. Many people there tend to use external state-run libraries such as React-Redux. Sometimes this introduces some unwanted complexity such as always having to jump between different files and making the components more difficult to reuse. To overcome such difficulties, React Team has introduced the use-effect hook, which will be discussed later, and which will allow you to divide a component into smaller function-based components (such as setting up a subscription or fetching data, etc.).

Class confuses both man and machine

Some people are really confused using this reference. This is because you are using this reference extensively for a variety of purposes when using class-based material. This means that in order to use class-based elements, you need to have an accurate idea of ​​how your JavaScript ‘this’ reference behaves in different contexts. But ideally, it should not be. To solve this problem React Team Hooks allows you to use more features of React without class.

So in summary;

Now functional elements allow you to use states like class-based elements.

We can avoid boilerplate code in componentDidMount () and componentDidUpdate () methods and reuse some side effects without any problems.

This allows you to achieve the same functionality by writing fewer and many cleaner codes.

Now we can build more powerful applications without relying on third party libraries like React-Redux.

You can extract state logic from an element so that it can be independently tested and reused.

And much more.

What’s the hook?

Hook is the function that allows you to “hook in” from the function element to the reaction state and life cycle characteristics. Hooks don’t work inside the class — they let you use feedback without the class.

The feedback provides some built-in hooks, the most common;

Use state

Use reducer

Use effects

Use context

Use callback

Use memo

Use ref

Hook’s rule

Hooks are JavaScript functions, but they impose two additional rules:

Call hooks only at the top level. Do not call hooks inside loops, conditions or nested functions. By following this rule, you ensure that the hooks are called in the same order each time an element is rendered. This would correctly store the hook position between multiple useState and useEffect calls.