Kitemaker에서 Recoil을 사용하면서 배운 점들을 정리하여 포스트로 올렸습니다.

기존엔 이 회사에서는 useReducer를 사용하여 간단한 상태관리를 해왔다고 합니다. 앱에서 다루는 데이터가 무수히 많아지면서 불필요한 리렌더링이 많이 발생해서 사용자 인터랙션에 따라 즉각적으로 반응하는 빠른 UX를 제공함에 있어서 어려움이 있었다고 하네요.

불필요한 리렌더를 줄이기 위하여 Recoil을 적용했다고합니다. API가 명확하고 이미 익숙했던 Redux랑 비슷한점도 있어서 사용하기 편했다고합니다. 추갖거으로, Meta팀이 성능 높은 UI를 다루기위해서 Recoil을 설계했다는 점이 결정에 있어서 중요한 역할을 했다고 합니다.

이 결정에 대해서 굉장히 만족스럽고, 적용 후 많은 개선이 있었으며 사용하면서 몇가지 배움이 있었다고 합니다.

1. 높은 성능을 위해서 무엇이 렌더를 유발하는지 잘 이해하고, selectors를 잘 준비하는 것이 중요합니다. selector에서 새로운 배열이나 새로운 객체를 반환한다면 리렌더를 유발하기때문에 referentially equal (===) 한 값을 반환하는게 굉장히 중요합니다.
2. 커스텀 Equality Check 활용한 성능 개선
3. Transaction을 활용하여 여러 종류의 업데이트를 한번에 몰아서 실행
4. atom의 수를 주시할것. atom이 너무 많아지면 성능에 영향을 끼침. 함께 렌더링되는 것이 있다면 가급적 하나의 atom으로 합쳐서 할 것

Recoil을 사용하여 불필요한 리렌더링을 많이 줄였지만, Recoil은 Magic이 아닙니다. 제대로 사용하기 위해서, 성능을 잘 최적하기 위해서는 충분한 시간이 필요합니다.