1. SZ
Использование
Recoil
в React и React Native

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

3. Plan to review
•Проблема управления стейтом в React
•Популярные решения для управления стейтом
•Основы Recoil
•Что такое ADHD и почему мы используем Recoil
•Как мы используем Recoil в мобильном приложении
•Тестирование Recoil атомов и селекторов

4. State management problem in React
❑Различные типы стейта
❑Много библиотек и подходов
❑Различные платформы(React, React native)

5. Types of state
1. Component’s (local) State
2. Components shared state
3. App’s (global) state
4. UI state
5. Cache (Redux, GraphQL cache)

6. Redux in 2021?
Why React projects still use Redux

7. What about Recoil?

8. What about Recoil?

9. Recoil – Advantages
1.Minimal and Reactish
2.Easy Learning Curve (just Atoms and Selectors)
3.Boilerplate-free API
4.Distributed and incremental state definition
5.Supports React Suspense

10. What is Recoil?
Atoms + Selectors + hooks + utilities

11. Recoil – Atoms
Atoms contain the source of truth for our
application state.

12. Recoil – Selectors
A selector represents a piece of derived
state. You can think of derived state as the
output of passing state to a pure function
that modifies the given state in some way.

13. What about ADHD?

14. What about ADHD?

18. React App – Login View State
Path:
• srcstorestatelogin-view.state.ts

19. React App – Login View
Path: srcviewsauthloginlogin.view.tsx

20. React App – RecoilRoot
Path:
srcindex.tsx

21. React App – Observing events
Path:
srcindex.tsx

22. React App – Observing events
Path:
srcindex.tsx

23. React App – Observing events (topics)
Path:
srcindex.tsx

24. React App – Selectors
Path:
srcindex.tsx

25. React Native App – Login View State
Path:
• srcstorestatelogin-view.state.ts

26. React Native App – Navigation
Path: srcviewsauthloginlogin.view.tsx

27. React Native App – RecoilRoot
Path:
srcApp.tsx

28. Testing Recoil
Use RecoilRoot in your tests

29. Testing Recoil
Use ReoilObserver to track atom
and/or selector change

30. Testing Recoil – RecoilObserver
Use ReoilObserver to track atom
and/or selector change

31. Testing Recoil - snapshot_UNSTABLE()
Use ReoilObserver to track atom
and/or selector change

32. Summary:
• 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)
• Have you tried Recoil already?

33. Links:
• https://recoiljs.org
• https://recoiljs.org/resources/
• https://adhdamerica.org/
• https://github.com/sergii-zhuravel

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