Everything you need to get started with useState hook in ReactJS

Introduction

Hooks were introduced in React version 16.8 and this was a revolutionary change as it provided a powerful and expressive way to manage state and side effects in React functional components allowing developers to write cleaner and modular code.

Some of the most commonly used hooks are:

• 1. useState

• 2. useEffect

• 3. useReducer

• 4. useContext

• 5. useMemo

• 6. useCallback

Working with useState hook

The useState hook allows functional components to add and manage state. Before the introduction of hooks, state management was limited to class components only. The useState hook is a function that takes the initial value of state as an argument and returns an array with the current state value and a function to update the state.

const [state, setState] = useState(initialState);

• state is the current state value

• setState is the updater function which allows us to update the state

• initialState is the initial value of state which can be of any type such as a number, string, array, or object.

Now let's create a basic counter state and update it to understand this concept further.

First, we will declare the useState for it and set the initial counter value to 0:

const [counter, setCounter] = useState(0);

Now we will update the counter by 1:

setCounter(counter + 1)

Similarly, to reduce the counter we can subtract it by 1:

setCounter(counter - 1)

Suppose if we want to reset the counter directly to 0 again, we can do it by:

setCounter(0)

Handling Arrays and Objects

Handling arrays and objects using useState is a bit trickier than handling primitive types such as strings, numbers, or booleans. This can be better explained with an example:

Let's first take an array of numbers and store it in our useState:

const [nums, setNums] = useState([1, 2, 3]);

Now to add another value to this array, we can do it like:

setNums([1, 2, 3, 4]);

However, this is not a good practice and not the proper way to update arrays or objects.

Here comes the concept of callback functions within updater functions. The callback function has its first argument as the previous value of the state, which makes it easier and safer to update the state:

setNums((prev) => [...prev, 4]);

This is exactly how we manage objects in our state as well.

Things to remember

Never directly update state without using the updater function as you would with a regular variable.

const [name, setName] = useState('mahesh');
name = 'suresh';  // ❌ Incorrect
setName('suresh'); // ✅ Correct

Directly updating the state would not cause the app to re-render (which is an entirely different topic in itself and is out of scope of this blog), which is necessary for React to update the UI.

We can give any name to the updater function, but it is a common naming convention to use the prefix ‘set’ and write the name of the state in camel casing.

Conclusion

In modern React development, the useState hook makes it possible for functional components to manage state effectively. By utilizing useState, you can enhance the functionality of your components, making them more dynamic and interactive.

Posted by Shivansh Rawat on 10th Oct, 2024
Sunil finds his forte in defining software architectures. With over 15 years of experience in the industry, he has contributed to several leading projects.