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 여기서 설명하고있습니다. (리액트 공식문서) 참고 해보시면 좋을것 같아요 :)

susan

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

이 글과 비슷한 Q&A

리액트 장바구니 총 합계 금액 계산 함수 어떻게 해야할까요?

javascript 공부없이 바로 react native 배워도 되나요?

타입스크립트 테스트코드 작성

리액트 셀렉트 박스 질문드려요