Tanstack-query의 react-query의 오픈소스를 뜯어보던 중 신기한 방식으로 useState를 초기화하는 것을 발견했다.
처음에는 observer에 함수 자체가 들어가는 건가 생각했었는데 검색해보니 함수의 반환값, 즉 Observer 클래스의 인스턴스가 들어간다고 한다.
이렇식으로 선언하는 이유는 이렇게하면 다른 상태가 변경되었을 때 observer도 새롭게 상태가 만들어져 반환되는 것이 아니라 초기 1회에만 실행이 된다고 한다.
즉, 불필요한 리렌더링을 막기 위함이다.
우선, 인스턴스를 생성하는데 5초가 걸리는 클래스를 아래와 같이 만들었다.
위와 같이 구현하면 버튼을 클릭할 때 마다 state가 바뀌어 re-rendering이 일어나고 5초가 경과하는 무거운 작업을 매번해야만 한다.
이제 SampleClass의 인스턴스를 만드는 부분을 state의 함수로 구현해 보겠다.
위와 같이 state 안에 함수를 넣어주었다. 이제 버튼을 클릭해도 SampleClas의 인스턴스는 초기에 한 번만 생성되는 것을 확인할 수 있다.
