Why doesn't a variable increment in my React component as expected?

Question

I'm a React learner and I want to understand something. The code below doesn't work, it's just a component with two buttons that add or substract a number and display it. Here's the whole code :

import React from "react";
import { useState } from "react";

const Compteur = () => {
  let i = 0;
  const [number, setNumber] = useState(0);

  const increment = () => {
    i++;
    setNumber(i);
  };

  const decrement = () => {
    i--;
    setNumber(i);
  };

  return (
    <div>
      <button type="button" onClick={increment}>
        +
      </button>
      <button type="button" onClick={decrement}>
        -
      </button>
      <p>Number : {number}</p>
    </div>
  );
};

export default Compteur;

But if I replace setNumber(i) by setNumber(number + 1), it works well. What's the problem with this i variable ? Thanks for your help !

The scope of i and the functions that capture it are remade every render. It needs to also use useState. — zero298
– zero298, Commented Nov 10, 2021 at 21:44

DaveVanFleet · Accepted Answer · 2021-11-10 21:48:15Z

1

Welcome to React!

The problem in your example is that each time the component rerenders (in your case due to a state change), i is reinitialized and assigned a value of 0. I think you're thinking of the component more as a loop, versus a javascript file. React does a great job as maintaining state, and that state will stay the same though rerenders of the component, which is why it's working as expected when you use number (a piece of React state) instead of i

answered Nov 10, 2021 at 21:48

DaveVanFleet

6034 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DaveVanFleet Over a year ago

also, side note, instead of setNumber(number +1), you'll want to do setNumber((prevState) => prevState + 1) since updates to state are asynchronous and the first way can lead to some unexpected behavior.

Brett East Over a year ago

@DaveVanFleet In this case I think you're actually going to be fine, because you're not relying on it to update another piece of state. You're right that you can't rely on these to be synchronous, but because of how it's written it doesn't need to be, setNumber(number + 1) should work just fine.

Brett East · Accepted Answer · 2021-11-10 21:48:51Z

1

So your problem here is setting let i = 0; as react code is rerun on every rerender, which is caused by state change (among other ways).

So when you call setNumber react then says "okay, rerender the page" and it makes its way down your code, and sees "set i to be 0" and then when you increment the code is saying "i++" or in this case "0 + 1" (because i is set to 0 again).

Essentially, every time react rerenders the component, it's going to reset the value in the variable. That's why we have to use useState because react is then able to keep track of those values.

Your example setNumber(number + 1) is how you should be writing this.

answered Nov 10, 2021 at 21:48

Brett East

4,3522 gold badges22 silver badges35 bronze badges

1 Comment

JSL Over a year ago

Thank you ! I better understand how it works !

Brandon Piña · Accepted Answer · 2021-11-10 21:54:27Z

1

You are using the variable i which is getting reinitalized every render, your code should be something like this

const increment = () => {
    setNumber(number + 1);
}

const decrement = () => {
    setNumber(number - 1);
}

edited Nov 10, 2021 at 21:54

answered Nov 10, 2021 at 21:49

Brandon Piña

9621 gold badge12 silver badges31 bronze badges

2 Comments

Brett East Over a year ago

This is not quite right, as number++ will attempt to change the value of number which is not valid for react state updates. You instead would have to write setNumber(number + 1).

Brandon Piña Over a year ago

Oh, thanks. Forgot that ++ and -- are also assignment operators

Collectives™ on Stack Overflow

Why doesn't a variable increment in my React component as expected?

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related