DEV Community

Cover image for ReactJS Hook Series - useState()
Mertcan KOÇER
Mertcan KOÇER

Posted on

ReactJS Hook Series - useState()

Today, we will start a brand new series, React Hooks! Without further ado, let's roll up our sleeves and get started.

What are Hooks?

Hooks are mechanisms that allow us to write component lifecycles features in functional components. If you are new to react and do not have to use old class components, we strongly recommend you to use functional components. Because React ecosystem says so.

Hooks are actually various functions created by react. But these functions have differences from normal javascript functions such as,

  • Hooks can not be used inside class based components. It can only be used in functional components.

  • Hooks must be called at the highest level. Loop should not be called inside inner functions or if conditions. It can cause undesirable situations.

How to use useState Hook?

We will go through a light bulb example to explain the useState hook.

useState Code Example

As you can see in the figure above, the useState function returns two things. First one of these values ​​is the state value and the other one is the function we will use to change the state value. We never equate or change state value ​​with other values. Because when these variable values ​​change in the background, React performs various operations and changes the elements we see on the screen.

The useState hook also takes a default value into it. In this way, when the state value is created, the initial value is assigned into its variable.

In our example, we keep the state called isLightTurnedOn whether the lamp is turned on or off. Well, what can we do to turn the lamp on or off? We can perform the operations by creating two buttons as shown below.

Handler Code Examples

Both keys have onClick listeners. In this way, any click triggers the specified function to execute and the state values ​​are adjusted accordingly.

The most important point here is when React updates the state values. State updates occur asynchronously. That is, the values ​​are not changed as the state function is called. The React library schedules the change in the most optimized way and performs the change when the time comes.

Well, have you ever thought about what kind of problem asynchronous updating of states can cause? We can understand the best example of this when we perform the operations of turning the light on and off with a single button. Figure below shows how to do it.

Toggle Code Example

In this way, when the toggle button is pressed, we achieve our goal by synchronizing our state value to the opposite of the previous state value. But we said that these processes occur asynchronously. What if the previous state value we get is not really the value it should be? React can not guarantee this.

Therefore, the setter function provides us a function that will allow us to correctly retrieve a previous state value. You can see the syntax of function below.

Previous State Based Update

Conclusions

  • Hooks are functions that gives us capability to use React state logic in functional components.
  • Hooks can only be used in functional React components.
  • useState is a hook that keeps data in components.
  • useState returns two values: state variable and setter function.
  • State update operations are done asynchronously.
  • If we need to update state value based on our previous state value, we should use functional syntax in setter function.

Discussion (0)