React JS useState hook not working with curly braces

Question

Can someone explain why this code won't run properly with curly braces around prev + 1 in the increment function?

export default function Counter() {
  const [clickCount, setClickCount] = useState(0);

  useEffect(() => {
       document.addEventListener('mousedown', increment);
       return () => {
           document.removeEventListener('mousedown', increment);
      };
   });

   // your code here
  const increment = () => {
      setClickCount((prev) => {prev + 1})
  }

  return (
      <h1>Document Clicks: {clickCount}</h1>
  );
}

Cause you missing `return`. it should be `setClickCount((prev) => {return prev + 1})`. — ulou, Jul 18 '22 at 16:14

score 1 · Answer 1 · answered Jul 18 '22 at 16:14

1

Arrow function returns expression result by default, but only without that {}

If you want to use {} remember to add return: (prev) => {return prev + 1}

answered Jul 18 '22 at 16:14

Konrad

21,590
4
28
64

score 0 · Answer 2 · answered Jul 18 '22 at 16:15

0

 setClickCount((prev) => { return prev + 1})

you have to return a value for this to work

answered Jul 18 '22 at 16:15

David Odinaka Enyoghasim

192
1
12

The answer is a duplicate of [This answer](https://stackoverflow.com/a/73025479/6340959) – Saeed Zhiany Jul 19 '22 at 03:05
while i was posting this there was no answer tho. we just posted together – David Odinaka Enyoghasim Jul 20 '22 at 08:56

score 0 · Answer 3 · answered Jul 18 '22 at 16:43

Either you use return statement for existing setClickCount or remove the arrow function and directly update the value.

 const increment = () => {
      setClickCount((prev) => {return prev + 1})
  }

or

const increment = () => {
      setClickCount(clickCount + 1)
  }

Jsfiddle link : https://jsfiddle.net/sureshpoosapati/85yhs4r1/1/

React JS useState hook not working with curly braces

3 Answers3