Start with React hooks

Tram Ho

Hooks is a feature you’ll use every day of your React development. React hooks are available in React version 16.8. Hooks are great because we get more tools from React developers.

1. What are hooks?

React hooks are a way to add React.Component functionality to functional components: state and lifecycle. Hooks let you use the functionality of react without a class.

2. React’s state hook

For example, we have 1 state in the component:

With Hooks we can write more briefly as follows:

Note that the functional component will be much easier for React newbies.

3. useState ()

You may not be familiar with the useState () syntax, which uses destructuring assignment for arrays. This is almost the same as the way we pull props out of an object with the destructuting object. Compare object destructuring and array destructuring to see why array usage is more effective. Object destructuring requires more writing to retrieve a variable and rename it.

  • Object Destructuring:

The above lines can be a little difficult to read, but with array destrcuturing we just need to name the variable as we take it out of the array. The first variable is the first item of the array.

  • Array Destructuring:

Short and easy to understand, isn’t it.

  • What does useState () give us?

useState () provides 2 variables and we can name those 2 variables as we like. Just be satisfied: the first variable is value, just like this.state, the second is a function to update that value, like this.setState. The last part passed to useState is the argument we passed to it. The argument of useState () is the initial value of the state. In the above example, the initial value of the variable count is 0.

  • What is bad about classes?

The introduction to React hooks provides a nice thing: Classes confuse both people and machines This means that classes can sometimes be confusing and can be written in any way. Dive into someone else’s project and you can enter a world of different syntax and style options. There are no plans to remove support classes. We have another way to code. By allowing classes to be converted into functional components, we can even break down parts of the application into smaller and more focused components.

  • Using multiple state hooks: We can use useState multiple times in the same function:

3. Effect Hook

State hooks allow us to use state in React functional components. This takes us one step closer to using functional components on class components. The next part of the transition to functional components is the lifecycle method.

The effect is similar to the componentDidMount, componentDiaUpdate, componentWillUnmount components.

This is what the Effect hook works for. Side-effects are what you want your app to do:

  • fetching data
  • DOM changes
  • set up registration

The effect will run after each render, including the first render. Let’s compare class vs functional component:

Only run the Effect hook when something changes: Since useEffect () runs every time a component is rendered, how does it only work once? The effect hook can take a second argument as an array. It will look through the array and only run the effect if one of those values ​​changes. For example :

  • (componentDidMount): only runs once

  • componentDidUpdate: runs when there is a change

  • What about componentWillUnmount: To run something before the component unmounts, we just need to return a function in useEffect ():

4. Combine useEffect and state

No problem if combined using them. Together they can create functional components that act as component classes. This is a practical example of a component fetching a user list from the Github API with useEffect () and useState (). We will start by using useState () for users:

We set users as an empty array into useState([]) . Next we put in useEffect () and use fetch to get data from the API:

Note that we are setting the second argument of useEffect to be an empty array so it only runs once. Finally, we will display that list


Reat state and Effect hook are great and will be a tool to help React learn easier for newbie. A lot of Vue’s success is in its simplicity of component creation. It is just an object. Now with React. You don’t need to distinguish between “is it a class” or “should I use a functional component”?


Share the news now

Source : Viblo