Seonglae ChoHow Recoil Updates Only Subscribed Components
To use
Recoil, you first need to wrap your app with RecoilRoot. While it uses Context API internally to pass down state, it doesn't trigger full re-renders like regular React Context APIThis is because the store being passed down isn't a regular
React state, so changes to this context don't cause re-renders of components it passes through
So how do components using a
Recoil atom re-render when that atom's value changes through setState?Looking at
useRecoilValue, we can see it uses useStoreRef to get a reference to the Recoil store and uses the useRecoilValueLoadable hook to get a LoadableIt then uses
useState to create a setState function named forceUpdate, which is set as a callback function for subscribeToRecoilValueComponents using
useRecoilValue subscribe to changes in their recoilValue through the subscribeToRecoilValue function. When the Recoil runtime triggers the registered callback, the component's useState updates, causing only that specific component to re-renderData is declared in atom units, and state management becomes simpler using useRecoilState, which works very similarly to React's useState hook
Recoil: A New State Management Library Moving Beyond Redux and the Context API
Available since May 2015, Redux is a predictable state container for JavaScript applications. It is a single source of truth, its state is read-only, and changes are made with pure functions. Redux has a nice browser debugging extension for easy debugging. The drawback is the complex boilerplate to start with.
https://betterprogramming.pub/recoil-a-new-state-management-library-moving-beyond-redux-and-the-context-api-63794c11b3a5
Recoil at React Europe 2020
Recoil is an experimental state-management library for React. http://recoiljs.orgQ&A for this talk: https://www.youtube.com/watch?v=_ISAA_Jt9kI&feature=youtu...
https://www.youtube.com/watch?v=fb3cOMFkEzs
Recoil은 Context API를 어떻게 사용하길래 상태 변경이 일어나도 RecoilRoot의 자식 컴포넌트들에 대한 불필요한 리렌더링을 유발하지 않을까?
리코일 0.6.0 버전으로 작성된 글입니다. Context API를 사용할 때 발생하는 문제점 보통 를 사용해서 스토어를 관리하고 를 사용해서 자식으로 상태를 내려주는 방법을 사용하게 되면, 이 가 통과하는 모든 컴포넌트들이 리렌더링되는 문제점이 있습니다. 그런데 을 사용하면 위와같은 문제가 발생하지 않습니다. 도 사용하려면 일단 로 감싸줘야해서 저는 에서 를 사용해서 상태를 내려주지만 무언가 처리를 해주기 때문에 리렌더링이 발생하지 않도록 하는건 아닐까?
https://woomin.netlify.app/recoil-context-api-no-rerender/
Recoil: 왕위를 계승하는 중입니다 (새로운 React 상태 관리 라이브러리)
NAVER Engineering | 김태곤 - Recoil: 왕위를 계승하는 중입니다 (새로운 React 상태 관리 라이브러리)
https://tv.naver.com/v/16970954
Recoil - 또 다른 React 상태 관리 라이브러리?
원문: Sveta Slepner https://medium.com/swlh/recoil-another-react-state-management-library-97fc979a8d2b 많은 React 상태 관리 라이브러리들이 있고, 가끔 새로운 라이브러리가 등장한다. 그러나 페이스북에서 직접 상태 관리 솔루션을 소개하는 것은 흔하지 않다. 이 라이브러리가 어떤 장점이 있고 새로운 점이 있는지, 그리고 앞으로 시간을 투자할 가치가 있는지 알아보자.
https://ui.toast.com/weekly-pick/ko_20200616
