리액트 useState 똑똑하게 쓰기 - lazy Initialization (게으른 초기화)

 

리액트를 사용하는 프론트 개발자라면 수없이 써봤을 useState 훅에 대해 새로운 사실을 하나 알게 되어 포스팅을 해보려한다. 

 

useState의 initalState argument

useState훅의 initalState argument 즉, 훅을 호출할때 state의 초깃값으로 전달하는 인수로 값 뿐 아니라, 값을 리턴하는 함수를 넣을 수도 있다. 

//아래와 같이 초깃값으로 값을 넣을 수도
const [ stateValue, setStateValue ] = useState('defaultValue')

//아래와 같이 초깃값으로 값을 리턴하는 함수를 넣을 수도 있다
const [ stateValue, setStateValue ] = useState(() => 'defaultValue')

 

이와 같이 useState 에 함수로 전달하는 initialState 인수를 리액트 공식문서에서는 Lazy initial state 라고 한다. 

 

 

lazy initial state 를 아는 것이 왜 중요한가? 

아래의 리액트 공식문서를 보면 'initialState argument는 초기 렌더링에 사용된다' 라고 하고 있다. 이후의 렌더링들(리렌더링)에서 이 initialState argument 값은 무시된다. 따라서 만약 이 initialState argument 값이 매우 비싼 연산의 결과라고 한다면 값을 바로 넣는 것 보다 이 값을 연산하는 함수를 initialState argument로 전달하여 lazy initial state를 하는 것이 더 효율적이다. 

 

Lazy initial state
The initialState argument is the state used during the initial render. In subsequent renders, it is disregarded. If the initial state is the result of an expensive computation, you may provide a function instead, which will be executed only on the initial render:
(출처: [리액트 공식문서] https://legacy.reactjs.org/docs/hooks-reference.html#lazy-initial-state) 

 

 

리액트에서는 렌더링이 실행될 때마다 함수형 컴포넌트의 함수를 다시 실행한다. 이때 useState 의 값도 재실행되는 것이다. 때문에 이 값이 비싼 연산의 결과에 대한 값이라면 리렌더링때마다 계속해서 실행되기 때문에 비효율적일 것이다. 이때 값이 아닌 함수를 전달할 경우 최초 렌더링때만 실행되고 이후의 렌더링에서는 실행되지 않는다. 

const [state, setState] = useState(() => {
    const initialState = someExpensiveComputation(props);
    return initialState;
    });

 

localStorage나, sessionStorage, map, find 등 브라우저 스토리지나 배열에 접근하는 등의, 상대적으로 시간이 오래걸리는 연산의 결과를 useState의 초깃값으로 사용할 때 lazy initial state를 사용하면 보다 효율적인 컴포넌트를 만들 수 있다! 

 

 

+

useState의 초깃값으로 값을 넘겨줄 때보다 함수를 넘겨주는 과정이 왜 더 효율적인지 (왜 리렌더링 시 값을 얻기 위한 연산은 실행되어 비효율적인 상황이 발생하고, 값을 얻기 위한 함수는 실행되지 않아서 효율적인 것인지)를 알려면 리액트에서 useState가 어떻게 작동하는지 그 내부 구현 알아야 한다! 이에 대해서는 추후 Preact 코드를 참고하여 정리해보는 포스팅을 작성해보려고 한다 (언제..? ㅎㅎ;;;)

 

 

 

끝! (도움이 되셨다면 광고 한번씩만 눌러주세요 !! 🙏🏻)

 

 

---

Reference

https://legacy.reactjs.org/docs/hooks-reference.html#lazy-initial-state

Hooks API Reference – React

https://m.yes24.com/Goods/Detail/123161563

모던 리액트 Deep Dive - 예스24