Manage React State with Recoil
•Download as PPTX, PDF•
0 likes•202 views
Manage your React state with Recoil! This talk goes through the basics of Recoil, including working with atoms and selectors, and consuming state using Recoil hooks.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Manage React State with Recoil
Similar to Manage React State with Recoil (20)
Recently uploaded
Recently uploaded (20)
Manage React State with Recoil
- 1. Manage React State with Recoil Yoni Weisbrod Lemonade Frontend Guild, Sept. 2020
- 2. Recoil in brief - State manager by Facebook - Some of the API is still unstable 🚧 - Strong integration with React (e.g. hooks & Suspense) Docs at https://recoiljs.org/
- 3. Getting Acquainted ● Install RecoilJS
- 4. Install RecoilJS - npm install recoil - Surround node with <RecoilRoot> Fin.
- 5. Getting Acquainted ● Install RecoilJS ● Refactor from useState to useRecoilState
- 7. useState
- 9. Selectors ● Can access state from atoms or selectors ● Always freshtm ● Derived state
- 11. - State is consumed using built-in hooks (e.g. useRecoilState, useRecoilValue, useSetRecoilState, etc.) - Each hook has an appropriate use case. Recoil in Action: Consuming State
- 12. Recoil in Action: Consuming State - State is consumed using built-in hooks (e.g. useRecoilState, useRecoilValue, useSetRecoilState, etc.) - Each hook has an appropriate use case. - atoms and selectors cannot be consumed directly.
- 13. - State is consumed using built-in hooks ⚠️ Limitation: Only React components can consume Recoil state. Recoil in Action: Consuming State
- 14. Hook #1: useRecoilState ● Most similar to useState (provides getter and setter objects) ● Triggers a re-render when subscribed atom/selector changes
- 15. Example useRecoilState vs. useSetRecoilState vs. useRecoilValue Demo: https://codesandbox.io/s/the-right-hook-lemonade-mtmpo
- 17. Asynchronous Selectors Q: What will be rendered until the DB query returns a value?
- 18. Asynchronous Selectors Q: What will be rendered until the DB query returns a value? A: Error
- 19. Asynchronous Selectors Solution 1 - React.Suspense
- 20. Asynchronous Selectors Solution 1 - React.Suspense Solution 1 - Avoid returning a promise
- 23. Reactions - Asynchronous selectors - useEffect
- 24. Reactions - Asynchronous selectors: cached, but cross-application - useEffect: non-cached, but local
- 25. Thanks!
- 26. Questions?
Editor's Notes
- Recoil is a state manager built internally at Facebook. It’s still experimental - meaning some of the API is in flux. Stability - can I use it in production? Much of the API is fine, stable. But some parts of it are still unstable. I would not build a business around it just yet personally, as it’s still nowhere near version 1. Currently at v0.0.12. Dependent on React - can’t be used outside
- Don’t have to wrap entire app with RecoilRoot - can use it on a specific node. Wrap outer node
- Regular React useState
- Regular React useState
- Only 2 changes - We’ve added a state object (an atom) We’ve changed useState to useRecoilState LIFTS state out of view
- Selectors Similar to Redux selectors -> way to get derived data Keeps data always fresh
- Analogy - spreadsheet.
- React components - including custom hooks. Meaning you can’t consume state inside a regular JS function, like you can with MobX. This is a limitation of Recoil - it lifts state out of components, but not outside React.
- Only 2 changes - We’ve added a state object (an atom) We’ve changed useState to useRecoilState
- Egghead lesson - https://egghead.io/lessons/react-choose-the-right-hook-for-your-recoil-state Fork sandbox, start with useState, then go to the rest.
- Async selectors - can be used to make API calls, DB queries, etc. Why? Keeps state up to date. Could also just use useEffect to make API calls based on Reactions.
- Async selectors - can be used to make API calls, DB queries, etc. Why? Keeps state up to date. Could also just use useEffect to make API calls based on Reactions.
- Only 2 changes - We’ve added a state object (an atom) We’ve changed useState to useRecoilState
- Only 2 changes - We’ve added a state object (an atom) We’ve changed useState to useRecoilState
- Only 2 changes - We’ve added a state object (an atom) We’ve changed useState to useRecoilState
- Only 2 changes - We’ve added a state object (an atom) We’ve changed useState to useRecoilState
- Cons: Local (not cross-application, so you can’t leverage the lifting out of state of Recoil) Pros: Not cached… (explain in next slide)
- Cons: CACHED!! Good for avatars, etc. Pros: Can be shared across app