Lazy initialization로 useState 최적화하기

react로 프로젝트를 만들 때면 생각보다 초기값을 넣어주고 해당 값이 앱을 재 실행하기 전까지 변하지 않는 경우가 많다.

 

평소라면 이런 초기값 할당은 큰 문제가 없다.

 

하지만 초기값으로 복잡한 값을 할당하거나 한 경우 reRender를 실행할 때마다 해당 함수가 계속 재 실행되게 되어 불필요한 낭비가 발생한다.

 

이를 해결하는 것은 무척 간단하다.

const getLocalData = () => window.localStorage('cacheCount');

// 평소
[count, setCount] = useState(getLocalData());

// Lazy Initialization
[count, setCount] useState(()=> getLocalData());

위와 같이 useState의 초기값을 함수로 넣게 되면 이제 해당 값은 초기에 1번을 제외하고는 reRender가 되지 않는다.

 

주의해야 될 것은 불필요한 reRender를 막아준다고 모든 값을 Lazy initialization로 설정하면 안 된다.

단순한 값이거나 props로 넘겨받아 이미 계산된 값의 경우 아무리 한 번 함수를 생성한다고 하더라도 함수를 생성하는데 드는 메모리 비용이 더 크기 때문에 사용에 주의가 필요하다.

 

사용했을 때 좋은 경우는

위에서의 예시처럼 localStorage나 배열을 map, filter 등을 한 경우, new Date()등을 하는 경우에 주로 사용하고 있다.

 

PS. Lazy initialization의 경우 필수가 아니기 때문에 개인적으로 개발 시에는 크게 신경 쓰지 않고 진행하다가 모든 개발이 끝나고 최적화 작업을 진행할 때 처리하면 필요한 부분이 잘 보였다.