Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 The useState() hook works with the state inside components.

2 Unlike class components, hooks do everything at once: initialization, updating, and providing access to the state. Let us observe a call, for example:

3 See the Pen<a>js_react_hooks_intro-1</a>by Hexlet (<a>@hexlet</a>) on<a>CodePen</a>.

4 The useState() hook takes the initial state as input and returns an array of two values:

5 <ul><li>The current state value</li>

6 <li>A function that updates the state</li>

7 </ul>This code looks unusual, so there are still questions about its operation. As we know, the component, as a function, is called for each re-rendering. And it's logical to assume that the count value will always be 0 because we are constantly calling useState().

8 Strange as it may seem, this won't happen. Hooks are much funkier than they seem at first glance. Yes, we call the useState() function every re-rendering occurs, but it knows about it internally and considers it in its work. We set the initial state and do not use it further. The state itself is stored somewhere inside, hidden from direct change. The only way to influence it is to call the returned function and pass a new state.

9 The setCount() function can be called anywhere:

10 <ul><li>In a callback, as in the example above</li>

11 <li>In another component to which we can pass this function</li>

12 </ul>In this sense, everything works the same as in classes.

13 Unlike this.setState(), the useState() hook does not merge the old state with the new one:

14 We can use hooks more than once if needed. We can easily create multiple state variables:

15 <h2>How many state variables should you create?</h2>

16 Technically, we can put everything in one variable, as we did with classes, but with hooks, there isn't much need for this. Moreover, the state within a single component is easier to manage when it's divided into parts that are updated together. For example: