Recoil is an ambitious project from the React team. It wants to become a leader among the state management libraries for React applications. But in two years it remains experimental. How does Recoil attract developers? Can it be used in production projects? And why is it still experimental? I want to talk about all this and a little more in my talk.

2. Key facts
Industry: Telecom, IoT, Automotive, CRM
Location: Kyiv, UKR
Position: Lead Software Engineer
Company: Temy (Absio)
2
Fan of JavaScript and JS frameworks. I like
table tennis, fishing and traveling
Sergii
Zhuravel

3. React developers have after create-react-app was created?
3
What is the
biggest problem

4. “To teach
children
React?”
4

5. “Not working Internet on a yacht?”
5

6. MobX
xstate
Hookstate
Context API
RxJS
Choosing a
library for
state
management
Redux
6

7. Redux as a silver bullet
Just use Redux Don’t use Redux
7

8. The most hated state
management library
Paradox
The most popular
state management
library
8

9. 9
I love Redux

10. 10
Context API?

11. 12

12. Has knows issues with
performance
Context
API issues
Provider hell
11
Resolves only the
"props drilling"
problem

13. Meet another player
13

14. 14

15. – Advantages
Minimal Simple
15

16. – Advantages
Powerful
16

17. What is ?
17
Atoms + Selectors

18. 18
Atom
minimal piece of the application state

19. UNIT OF STATE WHEN IS UPDATED,
EACH SUBSCRIBED
COMPONENT IS RE-
RENDERED WITH THE
NEW VALUE
CAN BE CREATED AT
RUNTIME
19
CAN BE USED IN
PLACE OF REACT
LOCAL COMPONENT
STATE

20. 20
Selector
a piece of derived state

21. A PURE
FUNCTION
ACCEPTS ATOMS
OR OTHER
SELECTORS AS
INPUT
COMPONENTS
CAN SUBSCRIBE
TO SELECTORS
JUST LIKE ATOMS 21

22. 22
So simple?
Only atoms and selectors?

23. 23
Emm.. no

24. Effects
Utils
Testing utils
Recoil tools
Hooks
24
Observer pattern

25. 25
How I started to
use Recoil?

26. 26

27. 27

28. 28

29. 29

30. 30

31. 31
How do we use
Recoil in
our React and
React Native apps?

32. PATH:
SRCSTORESTATELOGIN-VIEW.STATE.TS
32

33. Using atoms
PATH: SRCSTORESTATELOGIN-VIEW.STATE.TS
33

34. Make Recoil
available in
components
PATH:
SRCINDEX.TSX
34

35. Selectors
35

36. 36
How to update
atoms outside a
component

37. Observer pattern to the resque
37
PATH:
SRCSTORERECOILOBSERVEROBSERVERSUBJECT.TSX

38. DefaultSubject
38

39. Using
38

40. RecoilObserver
PATH:
SRCSTORERECOILOBSERVERRECOILOBSERVER.TSX
39

41. Recoil Observer - topics
40

42. Using
38

43. another way?
41
R E C O I L - N E X U S

44. 42
How do we use
Recoil in React
Native app?

45. React Native App – Navigation
43

46. 44
Recoil with Type
Script

47. How to test?
45

48. Testing
Recoil
USE RECOILROOT
IN YOUR TESTS
46

49. Testing
Recoil
USE
RECOILOBSERVER
TO TRACK ATOM
AND/OR
SELECTOR
CHANGE
47

50. Testing Recoil – RecoilObserver
48

51. Testing selectors - snapshot_UNSTABLE()
49

52. Pros &
cons:
Pros:
Easier state
management
Fast
Supports
suspense
Supports
code-splitting
Developed
and
supported by
React team
Big size of
the library
Experimental
51
Cons:

53. Ok, it looks cool
Is Recoil a Redux killer?
52

54. It was the
plan
53

55. First year – v 0.1.x
Current version – v.0.7.4
17 100 starts on GitHub
Many people mentioned
they use Recoil in
production
Asked Recoil team in
Twitter
Why it’s still
experimental?
Recoil in development 2
years now
54

56. Conclusion:
Recoil is still experimental, but it’s
used in production in many
projects
Recoil can be used in React and
React Native
Recoil is very easy to test (within
React context and outside)
You should try it
55

57. https://recoiljs.org
https://github.com/luisanton-io/recoil-nexus
https://adhdamerica.org/
https://github.com/sergii-zhuravel/react-
fwdays22
Links
56

58. 57
Thank you!
https://twitter.com/SZhuravel
Sergii
Zhuravel