Rebuild the counter application using Functional State Setter functions

This is continuation to my previous post.

In React, functional state setter functions are used to update the state of a component.

 

When you use the useState hook, it returns an array with two elements: the current state and a function to update that state.

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

Updating State with Functional Updates

Now, let's focus on how to update the state correctly using the state setter function (setCount).

 

Basic Update: Normally, you would call setCount with a new value like below.

setCount(count + 1);

 

This works fine, but if you have multiple state updates in quick succession, this could lead to issues because the state might not be up-to-date when you calculate the new value. React batches state updates for performance, which means that it may not immediately reflect the latest state.

 

Functional Update: To handle this correctly, you can pass a function to setCount. This function receives the current state (in this case, prevCount) as its argument:

setCount(prevCount => prevCount + 1);

 

How prevCount is injected?

When you pass a function to setCount, React internally manages this function.  When you call setCount, React queues this state update and later invokes the function you provided with the latest state value. So, when the function prevCount => prevCount + 1 is called, React automatically passes the most recent value of count as prevCount.

 

1.   Suppose the current value of count is 2.

2.   You call setCount(prevCount => prevCount + 1).

3.   React takes the current value (2) and passes it to your function. So, prevCount will be 2.

4.   Inside your function, prevCount + 1 evaluates to 3, and React sets the new value of count to 3.

 

Let’s build the counter application using Functional State setter function.

 

Follow below step-by-step procedure to build the complete working application.

 

Step 1: Go to the post (Quickly Set Up a React Project with Vite: A Step-by-Step), and set up a React Project ‘counter-app-with-functional-state-setter’.

 

Project structure looks like below.

Step 2: Create components folder in src/ folder and define Counter component.

 

Counter.jsx

import { useState } from "react";

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

  function incrementCount() {
    setCount((prevCount) => prevCount + 1);
  }

  function decrementCount() {
    setCount((prevCount) => prevCount - 1);
  }

  function resetCount() {
    setCount((prevCount) => 0);
  }

  return (
    <>
      <p>Count = {count}</p>
      <button onClick={incrementCount}>Increment</button> &nbsp;
      <button onClick={decrementCount}>Decrement</button> &nbsp;
      <button onClick={resetCount}>Reset</button> &nbsp;
    </>
  );
}

 

Step 3: Update main.jsx like below.

 

main.jsx

 

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import Counter from './components/Counter'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Counter />
  </StrictMode>,
)

 

Step 4: Build and run the Application by executing below commands.

  cd counter-app-with-functional-state-setter
  npm install
  npm run dev

 

Open the url ‘http://localhost:5173/’ in browser, you will see below screen.

Experiment with the button Increment, Decrement and Reset to understand the functionality.

 

You can download this application from below link. 

Previous                                                    Next                                                    Home