[React] useState 딜레이 현상

문제인식

리액트 useState()에서 setState() 후 state가 변경되지 않는 현상을 발견했다.

export default function Main() {
	const [state, setState] = useState(0);

	const onClickHandle = () => {
      	console.log('prev', state)
		setState(state + 1)
		console.log('new', state)
    }
    
    return (
    	<div>
      		<button onClick={onClickHandle} />
      	</div>
    );
}
	

(console)
>>> prev 0
>>> new 0

원인

알고보니 setState 는 비동기 작업으로 state 변경 작업을 수행하기도 전에 로그를 출력해서 이런 오류가 발생했다.

해결

useEffect()를 사용하여 state가 변경 될때 이 후 작업을 수행하게 하면 된다.

export default function Main() {
	const [state, setState] = useState(0);
  	const useEffect(() => {
    	console.log('new', state)	// state가 1 증가후 실행
    }, [state])

	const onClickHandle = () => {
      	console.log('prev', state)
		setState(state + 1)
    }
    
    return (
    	<div>
      		<button onClick={onClickHandle} />
      	</div>
    );
}
	

(console)
>>> prev 0
>>> new 1

Reference

https://stackoverflow.com/questions/55983047/strange-behavior-of-react-hooks-delayed-data-update