These slides have been presented in a webinar about Recoil at the Codete Tech Talks with Cloudinary on January 14th 2021. Author: Mateusz Bryła (https://www.linkedin.com/in/mateusz-bryła-78aa1572/) Dreamer, programmer, consultant, trainer. Founder at Lingmates, Team Lead at Codete for Cloudinary.

1. Recoil
Mateusz Bryła
Team Lead
mateusz.bryla@codete.com
mateusz.bryla@cloudinary.com
mateusz.bryla@lingmates.com

2. menti.com
49 64 76 9

3. Agenda (~40 min)
● 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

5. 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
●
Recoil

6. CC BY-ND 2.0 by Pierre Reveille

7. Let’s build a map app

8. App base

9. Cool feature: user draggable markers!

10. Markers support

11. Cool feature #2: inputs and statistics!

12. Problem

13. What would be the React way?

14. What would be the ideal way?

15. Meet Recoil!
Where?
https://github.com/facebookexperimental/Recoil
(mind the “experimental” - it’s only v0.1.2!)
In numbers?
● created 2020-05-04
● 11.3k stars, ~518 forks, 54 contributors
How?
●
● wrap your app with
Why?
You’ll see in a minute ;)
2021-01-14, https://www.npmtrends.com/recoil

16. The Recoil way

17. Local state

18. State shared through Recoil atom

19. Recoil Atom

20. Recoil Atom (in reality)

21. Recoil Atom (in reality)

22. Cool feature #3: …?

23. Cool feature #3: GEOFENCING!

24. Cool feature #3: …?

25. Derived values - Recoil selector

26. Async selector? No problem ;)

27. Cool feature #4: Persistence
https://my-amazing-map.com/?markers=[...],geofence=[...]

28. State observation

29. 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. Demo time!

31. Should I bother?
● 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

32. For under-the-hood addicts
● Works similar to react-redux
○ exposes Redux internal tree structure, wraps with HOC
and allows data read (only when necessary) and manipulation
○ exposes Recoil internal Atoms tree structure, hooks allow data
read (only when necessary) and manipulation
● There is more, check it out yourself ;)

33. 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

34. Q & A

35. Thank you!
Mateusz Bryła
Team Lead
Personal
@ mateusz.bryla@lingmates.com
LinkedIn mateusz-bryla