DEV Community

Cover image for React hooks: useState()
Denzel
Denzel

Posted on

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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

import React, { useState } from react

 function Counter() {
  return (
    <div>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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);
  };
Enter fullscreen mode Exit fullscreen mode

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>
  );
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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.

favicon geeksforgeeks.org

useState – React

The library for web and native user interfaces

react.dev

Top comments (0)