setCount(count + 1)를 쓰면 안되는 이유

[mdgarden]

【React Hooks】Why you shouldn’t write setCount(count + 1)
https://t-i-show.medium.com/react-hooks-why-you-shouldnt-write-setcount-count-1-e3ef2f046d31

저도 정말 최근에 알게된 사실인데 #20 과 관련이 있어서 메모 남겨놓습니다.

대충 말하자면 많은 참고문서나 책, 공식문서에서도 setCount(count + 1) 이렇게 쓰지만 사실은 이게 정확하게 스테이트를 쓰는 방법은 아니라는겁니다. state가 저장되어 있는 곳에서 변수값을 가져오는거지, 현재 값을 가져오는게 아니래요.

그래서

// useCounter
import { useState } from "react";

export const useCounter = (init: number = 0) => {
  const [count, setCount] = useState(init);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return { count, increment, decrement };
};

import { useCounter } from “./useCounter”; 
export default function App() { 
  const { count, increment, decrement } = useCounter(10); 
  const incrementDouble = () => { 
    increment(); 
    increment(); 
  }; 
  const decrementDouble = () => { 
    decrement(); 
    decrement(); 
  }; 
  return ( 
    <div className=”App”> 
      <h1>Count: {count}</h1> 
      <button onClick={incrementDouble}>+2</button> 
      <button onClick={decrementDouble}>-2</button> 
    </div> 
  ); 
}

이걸 굴려보면 제대로 증가하지않는 것을 확인할 수 있습니다.
https://codesandbox.io/s/nervous-shape-qxhe86?file=/src/App.js

[IGhost-P]

맞습니다 useState는 비동기 함수라 현재 DOM의 상태값을 확인할때는 사용하지 않고 useRef를 이용하는것이 좋습니다!