React increment and decrement numbers in console.log

Question

Maybe I'm not quite comprehending React.. So I'm trying to increment and decrement numbers but when I console.log, I see one number less or more in the console. I'm assuming this is because number starts with 0. Is there way I could match what I'm pressing and what's on the console?

import { useState } from "react";

export default function Numbers() {
  const [number, setNumbers] = useState(0);

  const onClickIncrease = () => {
    console.log(number);
    // I have tried the following:
    // setNumbers(number + 1);
    setNumbers((prev) => prev + 1);
  };

  const onClickDecrease = () => {
    console.log(number);
    setNumbers((prev) => prev - 1);
  };

  return (
    <>
      <div onClick={onClickDecrease}>-</div>
      <div>{number}</div>
      <div onClick={onClickIncrease}>+</div>
    </>
  );
}

Shahmir Varqha · Answer 1 · 2022-04-08T08:44:06.827

0

EDIT: It has to do with react state being async, can check the link above.

---- IGNORE BELOW ----

const onClickIncrease = () => {
   console.log(number); // output will be 0
   setNumbers((prev) => prev + 1);
   console.log(number); // output will be 1
};

And yes, the number starts with 0 because the argument passed in useState is 0.

const [number, setNumbers] = useState(0);

edited Apr 08 '22 at 08:44

answered Apr 07 '22 at 07:45

Shahmir Varqha

9
2

1

I don't think this is it, I think it's the fact react state is async – Benjamin Gruenbaum Apr 07 '22 at 07:47
`console.log(number); // output will be 1` is incorrect, `number` will still be `0` because React state updates are asynchronously processed. It pretty much has everything to do with React. – Drew Reese Apr 07 '22 at 07:49
oh noted, sorry for my mistake. – Shahmir Varqha Apr 08 '22 at 08:42

score 0 · Answer 2 · answered Apr 07 '22 at 07:49

0

import { useState } from "react";
 export default function Numbers() {
 const [number, setNumbers] = useState(0);  
  console.log(number);
return (
<>
  <div onClick={()=> setNumbers(number - 1)}>-</div>
  <div>{number}</div>
  <div onClick={()=> setNumbers(number + 1)}>+</div>
</>

); }

answered Apr 07 '22 at 07:49

khush mohammad

38
6

We have matching number with the console.log. However, what's the actual mechanism behind this? What's the actual difference between using prev => prev +1 or setNumbers(number + 1) in a function than actually applying on the click? – EIK Apr 07 '22 at 08:05
write another function for match value. – khush mohammad Apr 07 '22 at 08:11
inside useeffect – khush mohammad Apr 07 '22 at 08:12

React increment and decrement numbers in console.log

2 Answers2