DEV Community

Cover image for useState Hook
Harshavardhan
Harshavardhan

Posted on

useState Hook

What are React Hooks?

React Hooks are built-in functions that allow us to use state and lifecycle methods in functional components.


Rules of Hooks

  • Starts with use
  • Always should be invoked inside a function/component body or in another hook
  • The component in which it's being used should be uppercase (custom component)
  • Don’t call Hooks inside loops, conditions, or nested functions

useState Basics

useState enables us to add state to functional components.
It takes in a value (initial state) that can be anything (array, object, string, boolean, etc) and returns an array consisting of the current state and a function that updates the state.

One important thing to remember is the update function doesn't update the state right away.

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState(0);
  return (
    <div className="App">
      <h1>Counter: {value}</h1>
      <button>Increment</button>
    </div>
  );
};
export default App;
Enter fullscreen mode Exit fullscreen mode

Updating the state

  • Let's update the counter whenever we click on a button
import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState(0)
  return (
    <div className="App">
      <h1>Counter: {value}</h1>
      <button onClick={(() => setValue(value + 1))}>
        Increment
      </button>
    </div>
  );
}
export default App;
Enter fullscreen mode Exit fullscreen mode

Delaying the increment for a while after click

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState(0)

  const complexIncrease = () => {
    setTimeout(() => {
      setValue(value + 1)
    }, 2000)
  }
  return (
    <div className="App">
      <h1>Counter: {value}</h1>
      <button onClick={(() => setValue(value + 1))}>
        Increment
      </button>
      <button onClick={complexIncrease}>
        Complex Increase
      </button>
    </div>
  );
}
export default App;
Enter fullscreen mode Exit fullscreen mode
  • There's a gotcha above. If you continuously click on complex increment, you may notice that the value changes only once, no matter how many times you clicked.
  • To fix this, use Functional update of useState:

Functional Update (useState)

useState((previousstate)  {

// Always return something
// change previous state

return new state

})
Enter fullscreen mode Exit fullscreen mode
  • If the new state is computed using the previous state, we can pass a function to useState. The function will receive the previous value, and return an updated value
import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState(0)

  const complexIncrease = () => {
    setTimeout(() => {
      setValue((prev) => prev + 1)
    }, 2000)
  }
  return (
    <div className="App">
      <h1>Counter: {value}</h1>
      <button onClick={(() => setValue(value + 1))}>
        Increment
      </button>
      <button onClick={complexIncrease}>
        Complex Increase
      </button>
    </div>
  );
}
export default App;
Enter fullscreen mode Exit fullscreen mode
  • Now the counter works perfectly. 🤟🏻

Here's the sandbox link for above code.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs