What is useState in React?

#react #javascript #typescript #learning

useState

useState is a React hook used in functional components to manage and update component-specific state. It takes an initial value and returns an array with the current state value and a function to update that state. This allows you to handle dynamic data within your component, such as counters, form inputs, or any changing values.

In my own experience as a React Dev, this hook is one of the hooks that I use the most. It's like we as a React Dev cannot live without it 😆

How to Use State

useState is one of the simplest hook and a very useful one. Let's see how we can use it in our app

export default function Home() {
  // const [getter, setter] = useState(optionalInitialState)
  const [count, setCount] = useState(0);

  // Using the state
  return <button>{count}</button>;
}

useState returns an array where the first item is the getter and the second item is the setter. useState can also take an initial state by passing your desired value as the params. It is a common practice to prefix the setter with set followed by the state name like the example above.

Using the state is like using a regular variable. You can just call it inside the component. If you want to use it inside the tags, then you have to wrap it inside a curly bracket.

Setter is a function to update our state. Updating a state will trigger a re-render to our component and the component's children. We shouldn't mutate our state without using the setter to maintain predictability, immutability, and proper performance. Let's see how we can use it.

...
  <button onClick={() => setCount(1)}>Current number: {count}</button>
...

In the example above, we create a click event to set our state to 1. Great it works but, what if we want to keep incrementing it everytime we click the button? Easy, setState also accepts a callback as a parameter, we can also access the current state through the callback.

...
  <button onClick={() => setCount((current) => current += 1)}>Current number: {count}</button>
...

There we have it! We accessed the current state through the setter and we return the new value for the state. To make it look cleaner and easier to manage, we can put the setter inside a function instead.

...
  const handleIncrement = () => setCount((current) => (current += 1));
  return <button onClick={handleIncrement}>Current number: {count}</button>;
...

What's next?

Now that you have learned about useState, try creating some basic app and try to involve useState. If you have any question, feel free to drop a comment and if you liked this article, please give a like and follow me to get an update of this series.

Dadah~ 👋