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.
1 2 | const [state, setState] = useState(initialStateValue) |
Inside:
- 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | () => { const [count, setCount] = useState(0) const handleClick = () => setCount(age + 1) return ( <div> Current count {count}. <div> <button onClick={handleClick}>Increment Count!</button> </div> </div> ) } |
Declare a state variable
- In a class, we initialize the count state to 0 by setting this.state to {count: 0} inside the constructor:
1 2 3 4 5 6 7 8 | class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } |
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:
1 2 3 4 5 6 7 | import React, { useState } from 'react'; function Example() { // Khai báo một biến state mới, gọi nó là "count" const [count, setCount] = useState(0); |
- 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:
1 2 | const [count, setCount] = useState(0); |
The names of the variables on the left = are not part of the React API. You can name any state variable:
1 2 | const [fruit, setFruit] = useState('banana'); |
=> 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:
1 2 3 4 5 6 7 8 9 | // Cách dùng trước đây const array = ['Học', 'Chăm ngoan']; const a = array[0]; // Học const b = array[1]; // Chăm ngoan // Cách dùng array destructoring const [a, b] = ['Học', 'Chăm ngoan']; // a = 'Học' // b = 'Chăm ngoan' |
Compare State between class and functional component
CLASS COMPONENT
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | class ColorBox extends PureComponent { constructor(props) { super(props); this.state = { shape: 'square', color: 'deeppink', }; } handleBoxClick() { this.setState({ color: 'green' }); }; render() { const {color} = this.state; return ( <div className="color-box" style={{ backgroundColor: color }} onClick={this.handleBoxClick} ></div> ) } } |
FUNCTIONAL COMPONENT
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function ColorBox() { const [share, setShape] = useState('square'); const [color, setColor] = useState('deeppink'); function handleBoxClick() { setColor('green'); } return ( <div className="color-box" style={{ backgroundColor: color }} onClick={handleBoxClick} ></div> ); } |
Things to keep in mind when using useState ()
* useState () use REPLACING instead of MERGING.
1 2 3 4 5 | // setState() in class component: MERGING this.state = { name: 'Bạn gì đó ơi', color: 'red' }; this.setState({ color: 'green' }); // --> { name: 'Bạn gì đó ơi', color: 'green' } |
1 2 3 4 5 | // useState() in functional component: REPLACING const [person, setPerson] = useState({ name: 'Bạn gì đó ơi', color: 'red' }); setPerson({ color: 'green' }); // --> { color: 'green' } |
=> SOLUTION =>
1 2 3 4 5 | // useState() in functional component: REPLACING const [person, setPerson] = useState({ name: 'Bạn gì đó ơi', color: 'red' }); setPerson({ ...person, color: 'green' }); // --> { name: 'Bạn gì đó ơi', color: 'green' } |
* Initial state is only used for the first time, the next time it is not used anymore.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function ColorBox() { // redundant code for sub-sequent re-render const initColor = getComplicatedColor(); const [color, setColor] = useState(initColor); function handleBoxClick() { setColor('green'); } return ( <div className="color-box" style={{ backgroundColor: color }} onClick={handleBoxClick} ></div> ); } |
* Initial state callback only runs once.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | function ColorBox() { const [color, setColor] = useState(() => { // You're safe here // This function will be called once const initColor = getComplicatedColor(); return initColor; })); function handleBoxClick() { setColor('green'); } return ( <div className="color-box" style={{ backgroundColor: color }} onClick={handleBoxClick} ></div> ); } |
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: https://reactjs.org/docs/hooks-intro.html
React hooks APIreference: https://reactjs.org/docs/hooks-reference.html
React hooks FAQ: https://reactjs.org/docs/hooks-faq.html