This document outlines an agenda for introducing Recoil, a state management library for React. It will include meeting the audience, discussing state management options, hearing from a project owner, learning Recoil basics through a live demo of building a map application, and answering questions. Key features that will be demonstrated include sharing local component state through Recoil atoms, derived data with selectors, asynchronous data, and state persistence. The presenter argues that Recoil is worth considering if an application requires more than Context can handle and is not afraid of experimental APIs.
3. Agenda
● Meet the audience ;)
● Where we are with state management?
● Let’s listen to the story of ........................ - the Project Owner
● Recoil basics
● Live demo ;)
● Summary
● Further reading
● Q&A
4. State of the art of the management of the state
Flexibility,
Possibilities
Effort,
Overhead,
Learning curve
●
Redux
●
useState + props
●
React Context
●
Redux + Redux Toolkit
●
MobX
14. Meet Recoil!
Where?
https://github.com/facebookexperimental/Recoil
(mind the “experimental” - it’s only v0.10!)
In numbers?
● created 2020-05-04
● 9k stars, ~400 forks, 40 contributors
How?
● yarn add recoil
● wrap your app with <RecoilProvider>
Why?
You’ll see in a minute ;)
2020-08-25, https://www.npmtrends.com/recoil
28. Recoil core concepts - summary
● Flexible shared state
● Derived data and queries
● App-wide state observation
● (built in asynchronous data handling)
● (built in React concurrent ready)
30. Should I bother?
If you…
● Need more than a simple Context can handle
● Don’t like to introduce too much overhead
● Are not scared by the “experimental” keyword…
● … but want to be ready for React Concurrent Mode
… then at least give it a try ;)
31. For under-the-hood addicts
● Works similar to react-redux
○ <Provider> exposes Redux internal tree structure, connect wraps with HOC
and allows data read (only when necessary) and manipulation
○ <RecoilRoot> exposes Recoil internal Atoms tree structure, hooks allow data
read (only when necessary) and manipulation
● There is more, check it out yourself ;)
32. For bettime readers
● Introduction to Recoil by its creator - Dave McCabe (@mcc_abe)
https://www.youtube.com/watch?v=_ISAA_Jt9kI
● Official Recoil docs (be aware of “This API is currently under development and will change”)
https://recoiljs.org/docs/introduction/core-concepts
● Recoil source
https://github.com/facebookexperimental/Recoil
● React concurrent mode
https://pl.reactjs.org/docs/concurrent-mode-intro.html
● This presentation
TODO PASTE LINK ;)