[T]리액트의 useState와 lazy initialization

React의 useState의 Lazy Initialization (지연 초기화)란?

우리가 알고있는 기본적인 useState 방식은 다음과 같다.

const [count, setCount] = useState(0);

1. 상태의 초기값 설정
2. 상태값과 상태를 업데이트 하는 함수 선언
3. 이후 상태의 분기에 따라 렌더링 & 상태값 업데이트

하지만, 초기 값을 설정하는 과정에서 연산 비용이 많이 드는 작업이 있다면? 아래와 같이 하는 경우도 있다.

const [data, setData] = useState(func());

하지만, 위와 같은 방법으로 사용했을 때의 단점은 func()이 컴포넌트가 렌더링될 때마다 실행되며, 이는 곧 불필요한 무거운 연산이 반복적으로 실행된다는 것이다. 그렇다면 이때 필요한 것은, 불필요한 연산을 방지하는 방법을 사용하는 것이다.

바로 함수의 선언값을 전달하는 것이 아닌 함수 자체를 전달하면 해당 함수는 최초 렌더링 시에만 실행되는 효과를 가진다. 이는 Lazy Initialization (지연 초기화) 라고 하며 아래의 방법처럼 사용한다.

const [data, setData] = useState(() => func());

왜 이렇게 동작할까?

useState(() => someHeavyFunction())

• 여기서 useState 의 인자로 안에 함수를 전달하면, react는 해당 함수의 반환 값을 초기 상태로 사용함.
• 즉, someHeavyFunction()의 결과만 가져오고, 함수를 다시 실행하지 않음.
• 이후 상태가 변경될 때는 someHeavyFunction()이 다시 실행되지 않음.

이를 통해 불필요한 연산을 방지하고, 성능을 최적화할 수 있다. 특히 비용이 많이 드는 연산이 있을 때 사용하면 효과적일 것 같다.