React Hooks and the basic changes to be grasped

Tram Ho

first . What are hooks

In version 16.8 React introduced users a new concept "Hooks" with the aim of directing the future to writing functional components . Hooks allow you to use state in functional components without having to use component classes as before. After a long time of applying Hooks, Hooks now can almost completely replace class components . In this article, I will mostly talk about how to code so that newcomers from class component writing can easily apply Hooks immediately.

2. useState – initialize one and more states

The useState function helps us to declare and update the state, it returns a pair: the current state value and the method to update that state. For example:

The two functions setAge and setFruit have the same effect as using this.setState () in the component class, they help us update the state value when needed. The above example when writing in the component class writing would be:

Declaring multiple states in a function component When declaring a state with the above function writing is only suitable when your component has only one or two states, imagine when it has 100 states? Ok Hooks also has a solution for it to make it both short and very similar to the state declaration in the component class.

Above I use the setState () function for both age and fruit updates This is how to declare the state you should use, if there are only 10 states for each state we use the state declaration and the corresponding set function then Our component is going to be a mess and nobody wants to read it (not to mention hundreds ? ((, I haven't met the 100 state component before ? ))

3. use Effect () – an alternative to lifecycle methods

Previously used lifecycle methods such as componentDidMount (), componentDidUpdate (), componentWillUnmount, etc. are now encapsulated in a single function, useEffect (). Here's how to write equivalent lifecycle when we use useEffect ()

  1. ComponentDidMount ()

    This function works like componentDidMount (), which is called once when the component is mounted, let us note the second parameter "[]" is an empty array. This makes the code inside the useEffect () function run only once.

  2. ComponentDidUpdate ()

    Without the second parameter ([]) the code in the useEffect () function will run whenever the component is rendered. This makes it similar to the componentDidUpdate function.

  3. ComponentWillUnMount ()

When we return a function in the useEffect () function, the function returned will have the same effect as componentWillMount, so window.removeEventListener ('mousemove', () => {}) will be run when the component is unmounted.

4. Callback after setState

For many people who have done React projects with component class, it is impossible not to know the use of callback function right after calling this.setState ({}) function which helps us solve the problem of calling successive api manually binding the latter to using something returned from the previous one. This is often the case in the nn relational problem in sql, causing us to generate an extra table. For example, Room and BookRoom are related, so we create a BookRoomDetail table to store information of each booking (BookRoom).

For example when I create a new reservation:

I used bookRoomID returned from the first API call callCreateBookRoomAPI to pass as the parameter of the second API call callCreateBookRoomDetailAPI

To do this in Hooks, we use the magic function useEffect () :

Explain: When we pass a value into [] in the useEffect () function, every time that value changes, the useEffect () function will run once so that you can capture the current bookRoomID and call callCreateBookRoomDetailAPI , you should Use … state to keep states that don't want to change and update bookRoomID.

5. useRef

Another thing worth noting is useRef. Ref helps to access DOM nodes or React elements created in render function Some of the effects of ref can be found on Reactjs homepage https://reactjs.org/docs/refs-and-the-dom.html to learn more

We use useRef () to initialize and use the current property when we want to call ref

6. Conclusion

Hopefully the knowledge I share in this article will help people when they first approach React Hooks and want to learn quickly the same things between old class writing style and hooks. If you want to learn more, you can go to docs https://reactjs.org/docs to learn more. Thank you for reading my article, wish you success!

Share the news now

Source : Viblo