Hi guys, the previous post in my ReactJS series mentioned and talked about the LifeCycle Components with methods corresponding to the ReactJS lifecycle stages. And here everyone is sure that these methods can only be used with the Components class in ReactJS. So, when used with Function Component, is there any way we can take advantage of the activity flow in the Component’s lifecycle to customize it not with our class Components but with functional components or not. The answer is possible when we use hooks. Please continue to read my article.

1. Getting started

React 16.8.0 is the first release to support Hooks. When upgrading, don’t forget to update all packages, including React DOM. React Native supports Hooks since the 0.59 release of React Native. ( reacjs.org )

According to ReactJS documentation, from version 16.8.0 onwards we will have an alternative tool for using life-cycle methods or can change our new view of Functional Components known as stateless components when state can be used in using this Component. These are Hooks. With Stateful Component (Class Component) methods like componentDidMount, or componentDidUpdate sometimes we need to call the same method to call API in both of these methods causing duplication. Hooks also fix this problem when we no longer use “a bunch” of life-cycle methods in Component so our code gets somewhat cleaner. Summary :

The advantages of using hooks:

• We can use state in Functional Component.
• Eliminate confusing complexity or code when used with Class Component such as having to bind methods, or forcing constructor to be instantiated when using props …
• Don’t care when you don’t know what life-cycle method to use when there are clearer hooks.

=> Since then, using Functional Components can completely replace for Class Components. And currently it’s trend of developers to use ReactJS with Functional Components rather than Class Components.

2. Use hooks

useState ()

And the first one when it comes to hooks is the useState (). With useState () we have solved the problem of using state in Functional Component. Equivalent to using this.state

With the above code we see that instead of using useState(0) we declare useState(0) ; That is the initialization of count to 0 each time the Component is re-rendered. Alternatively we can pass an object or an array if we want to go inside useState (). We also don’t need to use this.setState which can directly call setCount or custom you define in const [count, setCount]

useEffect ()

With the useEffect () hooks can replace componentDidMount, componentDidUpdate depending on the case you want.

With the above useEffect () we will pass 2 parameters, the first is the function that implements the effect, and when passed the second parameter is the parameter that useEffect () depends on. That is, whenever there is a change in count, this function will be executed and re-rendered Component. As such it is similar to componentDidUpdate in ClassComponent.

When you do not pass the second parameter like this, the render will not happen when there is a change because the parameter is an empty array. As such it is similar to using componentDidMount. We can apply to the fetch api and update the api again when changes are made.

3. Conclusion:

Through this article we can go through the usage of hooks and partly why Functional Components are used more commonly. The article has just introduced about the two basic function hooks that are useState () and useEffect (), but there are some other function hooks that are guided right at reactjs.org ‘s homepage , people up for more reference . Thank you everyone for following the article. Hello everyone and see you in the following articles!