코드로 올리면 괄호 다 날라가서 사진으로 올림.
위 코드의 결과는 첫 번째 렌더링될 때 다음 콘솔로그가 뜸.
outside of useEffect, but inside of component foo: true
---inside JSX--- foo: true
RE-RENDERED foo: true
RE-RENDERED foo: true
처음 버튼 누르면 다음 콘솔로그가 뜸.
outside of useEffect, but inside of component foo: false
---inside JSX--- foo: false
다시 버튼 누르면 다음 콘솔로그가 뜸.
outside of useEffect, but inside of component foo: false
---inside JSX--- foo: false
다시 버튼 누르면
콘솔로그 없음.
처음 버튼 누를때까진 이해가 가는데
왜 버튼을 2번 누르는 것까지 콘솔로그가 뜨는거지? 어차피 useState를 통해서 상태를 변경하는데 이전 상태랑 같은데...
https://kdy1.github.io/post/2023/1/react-til/
여기서 봄
나도 저거 보고 고민중인데, 저 분석이 맞는지 애매해서 찾아보는중
https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update
공식 문서엔 언급은 되어있는데 왜 그런진 모르겠다.
https://github.com/facebook/react/issues/14994#issuecomment-468779750
음... 대충 어떤 의미인지 알겠다
기본적으로 이전 state와 새로운 state가 동일하면 다시 렌더링을 하지 않으려고 하는데, 이전 state와 새로운 state 이후에 다시 함수를 호출해보면 달라질 수 있는 가능성이 있고. 그래서 한 번 더 호출해서 확인하는 것 같네.
맞음 두번 돌려야 알 수 있는 케이스들이 있으니까 일관적으로 처리하기 위해 모든 케이스에서 싹 두번 돌리게 해놨다는 거
첫번째 렌더링때 useEffect 로그가 왜 두번 출력 되나요?
strict mode를 설정하면, useEffect가 두 번 호출됨. 문제를 일찍 발견하기 위해서