React hooks: useState()

Introduction

State management is a core function that gives React the ability to build interactive and dynamic applications. By using hooks, React gives developers the ability to access and manage those states. In this blog, we’ll explain the useState() hook and provide an example of how to use it.

What is useState()

In React, useState() is a built-in hook from the React library that gives you the power to add and manage state within a component. The useState() hook takes in an initial state and then returns two values.

const [state, setState] = useState(initialstate)

How to use useState()

Let's try building this counter app above:

The first thing we must do is import useState() from the React package:

import React, { useState } from “react”

Below it, we can write the base of our component called "Counter":

import React, { useState } from “react”

 function Counter() {
  return (
    <div>
    </div>
  );
}

Now we need to initialize our state. We can do that by adding his line of code const [count, setCount] = useState(0); under the component:

import React, { useState } from “react”

 function Counter() {
const [count, setCount] = useState(0);
  return (
    <div>
    </div>
  );
}

Next, we will need two functions. A function with the name of increment() to increase the counter and another function with the name of decrement() to decrease the counter:

function increment() {
    setCount(count + 1);
  };

  function decrement() {
    setCount(count - 1);
  };

These functions will have the responsibility of updating the current state. Whenever increment() is called, we will call setCount() to update the current count by +1 OR if decrement() is called we will call setCount() to update the current count by -1.

Lastly, we can add buttons for the user to interact with:

return (
    <div>
      <button onClick={increment}>+</button>
      <span>{count}</span>
      <button onClick={decrement}>-</button>
    </div>
  );

As shown in the code above, both buttons have an event listener called onClick. Whenever a button is clicked it will call the function that is inside of it. For example, when the + button is clicked, it will call on the increment() function and increase the count by 1; whenever the - button is clicked, it will call on the decrement() function and decrease the count by 1.

And that's it! Here is what our Counter component look like in its entirety:

import React, { useState } from 'react';

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

  function increment() {
    setCount(count + 1);
  };

  function decrement() {
    setCount(count - 1);
  };

  return (
    <div>
      <button onClick={increment}>+</button>
      <span>{count}</span>
      <button onClick={decrement}>-</button>
    </div>
  );
}

Conclusion

There are many other ways to use the useState() hook and there are also many other hooks in React for developers to take advantage of. Whether it's to manage a state or make a counter app, the useState() hook is a very powerful tool to take your React projects to the next step.

Sources

ReactJS useState Hook - GeeksforGeeks

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

geeksforgeeks.org

useState – React

The library for web and native user interfaces

react.dev