ReactJS: useState in React Hooks.

Tram Ho

Summary of hook concept

  • What is a hook? Hook is a special function that allows you to use React’s features (without having to create a class). For example, useState is a hook that allows you to add React state to function components.
  • When should I use a hook? If you write a function component and realize you need to add some state to them, you previously need to convert it into a class. You can now use the hook inside the existing function component.

Introduction to useState () hook

  • As a basic hook of reactjs version> 16.8.
  • Help me to use state in functional component.
  • Input: initialState (value or function)
  • Output: an array with 2 elements, respectively for state and setState.
  • Usage: const [name, setName] = useState (‘Abc’);

In a nutshell: => useState allows us to declare local state in Function Component in a way that was previously used for Class Component only.


  • state : defines the name of the state it can be a single value or an object, .. (is the parameter of useState)
  • setState : Defines the function name for updating state (is the parameter of useState)
  • initialStateValue : is the initial value of the state.

For example:

Declare a state variable

  • In a class, we initialize the count state to 0 by setting this.state to {count: 0} inside the constructor:

Inside a function component, we don’t have this, so we can’t install or read this.state. Instead, we call useState Hook directly inside the component:

  • The above example declares a state variable called count and sets it to zero. React will remember its current value and give our function the latest value between re-renderings. If we want to update the current count value, we can call the setCount function.
  • What does the useState function do when called? It declares a “state variable”. This variable is called count but we can call it with any name, for example called banana. This is a way to “store” values ​​between function calls – useState is a new way to use the way this.state is used in the class. Typically, these variables “disappear” when the function ends but these state variables are retained by React.
  • What parameters does the useState function take? The only parameter passed to the useState () hook is the original state. Unlike declaring with Class, state doesn’t need to be an object but can be a number or a string. For the above example, we only need to know how many times the user clicked, so we pass the initialization value of 0. (If we want to store two different values, we’ll call useState () twice.)
  • What does useState return? It returns a pair of values ​​as an array: the current state and a function to update it. This is why we write const [count, setCount] = useState (). This pair is similar to this.state.count and this.setState in the class, otherwise we use them in pairs.

Array destructoring syntax

  • You may have noticed that we use square brackets when declaring a state variable:

The names of the variables on the left = are not part of the React API. You can name any state variable:

=> This Javascript syntax is called “array destructuring”. It means that you are creating two new variables fruit and setFruit. In particular, fruit is the first value returned by useState, and setFruit is the second value.

* Example for you to understand more specifically:

Compare State between class and functional component



Things to keep in mind when using useState ()

* useState () use REPLACING instead of MERGING.


* Initial state is only used for the first time, the next time it is not used anymore.

* Initial state callback only runs once.

You guys remember it

  • useState () makes functional components usable by state.
  • useState () returns an array of 2 elements [name, setName].
  • useState () applies replacing instead of merging as the component class.
  • Initial state callback only executes 1 time.

You can refer to at:

Introduction to react hooks:

React hooks APIreference:

React hooks FAQ:

Share the news now

Source : Viblo