useState 안에 함수를 넘기면 왜 반복실행을 방지할 수 있나요?

Question

해당 영상 강의 초반에 const [counter, setCounter] = React.useState(jsonLocalStorage.getItem('counter')) 위 코드를 수정하시면서 카운터의 useState( ) 초기값에 함수 형식으로 쓰면,  App 이 렌더링 될 때마다 local storage 에 접근하는 걸 방지할 수 있다고 설명하신 걸로 이해했습니다. 왜 함수 형식 () => { return ... }  으로 useState 초기값에 코드를 쓰면 리액트가 반복실행을 안하는(?) 건지 궁금합니다! 감사합니다 :)

진유림 · Answer

오 현이님 감사합니다 ㅎㅎ 딱 정확한 문서예요~   더 궁금하다면 Kent의 이 글을 참고해보시는것도 추천드려요. https://kentcdodds.com/blog/use-state-lazy-initialization-and-function-updates   요약해보면 - 함수를 통해 state를 지연초기화하면 매 렌더링마다 함수를 생성하긴 한다 (js엔진이 매우 빠르기 때문에 매번 함수 생성하는건 노이슈) - 다만 함수를 실행시키는건 값이 필요한 순간(즉 초기렌더링 순간)뿐이기 때문에 고비용 연산은 초기 한번만 실행된다   입니다

스타현이 · Answer

해당질문은  https://ko.reactjs.org/docs/hooks-reference.html#lazy-initial-state 여기서 설명하고있습니다. (리액트 공식문서) 참고 해보시면 좋을것 같아요 :)