Otonye7

Explaining React useState to a 4 years old.

Amietubodie Collins Otonye's photo
Amietubodie Collins Otonye
·

4 min read

What is useState ?

useState is a React hook that allows us to access state in a functional component. In React versions less than 16.7, if we wanted to create a component that needed state we have to do that using the class method, now with the help of hooks we can now do that without having to use a class method. NOTE Hooks does not work inside react classes instead it helps you use react without classes.

#What does useState do for us as React Developers?

When you create a functional component you can use useState to track the state of the component and also update the state.

for example.

Suppose we want to track how many times a button has been clicked on a page, you can do that with useState.

``' import React, {useState} from 'react';

const Counter = () => { const [count, setCount] = useState(0);

const handleCount = () => {
    setCount(count + 1)
}

return (
    <div>
         <div>{count}</div>
         <button onClick={handleCount}>Click Me</button>
    </div>
)

}

export default Counter;

What did i do here ? 

Firstly i imported useState from react,  then i created two variables which are count and setCount

import React, {useState} from 'react';

const [count, setCount] = useState(0);

Now count refers to the initial value which i set to 0 as shown above, if i do something like this

const [count, setCount] = useState(1);

 then count is 1 that is how it works and setCount is the variable i want to use to track the value of count and update that value anytime a person clicks on the button. 

Lastly i created a function that will update the value of count anytime a user click on the button

const handleCount = () => {
    setCount(count + 1)
}

Now what this handleCount function does is that it listens for an onClick event then assigns setCount to the value of count + 1 now anytime a user clicks on the button i want to update count value from 0 to 1, that means i want to set the initial value of count from 0 to 1 and if a user clicks on the button for second time i would love to update the value again from 1 to 2, that is what that functions simply does.

Lets do another example to make sure you understand what you are reading. Now suppose we want to multiply a value by 2 anytime a user clicks on a button. how can we do that ?

import React, {useState} from 'react';

const Multiply = () => { const [multiply, setMultiply] = useState(1);

const handleMultiply = () => {
    setMultiply(multiply * 2)
}
return (
    <div>
         <div>{multiply}</div>
         <button onClick={handleMultiply}>Click Me</button>
    </div>
)

}

export default Multiply;


Now this second example is almost similar to first i am creating two variables multiply and setMultiply then i am setting the initial value of multply to 1 which is shown below

const [multiply, setMultiply] = useState(1);


setMultiply is a variable i want to use to track the value of multiply and update that value anytime a person clicks on the button. 

Then i created a function that will update the value of multiply anytime a user click on the button

const handleMultiply = () => {
    setMultiply(multiply * 2)
}

``` Now handleMultiply listens for an onClick event and then assigns setMultiply to the value of multiply 2. This means that anytime a user clicks on the button, if the initial value is 1 it will multiply 1 2 and set the initial value from 1 to 2 ( the result of 1 2), now the value of multiply (the initial value ) is now 2 if i should click on the button again for the second time it updates the value from 2 to 4 ( 2 2).

Conclusion.

useState is a Hook (function) that allows you to have state variables in functional components. You pass the initial state to this function and it returns a variable with the current state value and another function to update this value.

ReactHooksReact