UseState trong React Hook
- Tram Ho
**useState()** is a basic hook that helps to use state in a Functional Component. This hook takes input as a value or function and outputs as an array with two elements for state and setState, respectively. When useState is called, it declares a state variable. This is a way to “store” values between function calls — useState is a new way to use it as this.state is used in a class. Normally, these variables “disappear” when the function ends, but these state variables are retained by React. ## Declaring a State Variable Let’s see how it is different to declare a state count with a zero initialization value in a class and function. In a class, state is initialized using this.state in the constructor: constructor { super(props); this.state = { count: 0 } } But there is no this in the function component, so state cannot be used with this.state. Therefore, to use state in functional components, we use useState. The useState declaration is quite simple and concise than the declaration in the class. Unlike class declaration, state does not have to be an object but can be a number, string… const [count, setCount] = useState(0); ## Using State When we want to display the current value of state in the class, we use this.state.count, and in the function we use the count variable directly: //Use state in the class components
Current number: {this.state.count}
//Use state in functional components
Current number: {count}
## Update State In the class, to update the state, we use this.setState() to update the count. In the function we already have setCount and count variables, so we don’t need this anymore: //Update state in class component //Update state in functional component ## Note when using useState ### useState uses Replacing not Merging Unlike in class component use Merging when using setState, when changing state, just put in the state that needs to be changed when setState, it will keep the same value and update the changed state: this.state = { name: "Hung", age: 23 }; this.setState({ age:24 }); // => { name: "Hung", age: 24 } And useState when updating will get the updated state to replace the old state. That’s why we need to clone the state before using it. const [people, setPeople] = useState({ name: "Hung", age: 23}); setPeople({ age: 24 }); // => { age: 24} // Clone before using setPeople({ ...people, age: 24}) // => { name: "Hung", age: 24 } ### Initial State is only used for first render const initState = getState(); const [state, setState] = useState(initState); Here initState is only used for the first render, after that is deprecated so it makes no sense to run getState(). So how to only run getState() exactly once. To solve this, we can use callback instead of a value, so it will only be run once and then won’t run again. const [state, setState] = useState(() => { const initState = getState(); return initState; }); ## Conclusion * useState() makes it possible for functional components to use state. * useState() returns a 2-element array [state, setState]. * useState() uses replacing instead of merging when setState. * initState callback runs only once the first time. Documentation: https://reactjs.org/
Source : Viblo