Facebookにより開発された軽量なグローバルステート管理ライブラリです

1. Let’s develop app with react and recoil
Reactで話題のRecoilを使ってみた
フロントエンドLT会 vol.1 -2020夏祭り-
第6回 Try English LT! for engineers
Mikihiro Saito

2. Introduction
Mikihiro Saito
Software Engineer sa Philippines
JS（React、Vue、Angular）
Twitter: @bohol_engineer

3. What is React？
A JavaScript library for building user interfaces
- Declarative
- Component-Based
- Learn Once, Write Anywhere

4. How to write？

5. What is Recoil？
A state management library for React
- Minimal and Reactish
- Data-Flow Graph
- Cross-App Observation

6. State Management
user.name name
name
name
name
name
name
root component
child components

7. Why not use Redux？
- global state management library
- flux
- testable
State
Action
Dispacher
View

8. Disadvantage of Redux
- a lot of steps to make extra code
- Hooks
- Context API

9. Why not use Context API？
It’s not optimized for high-frequency updates

10. Anti-Pettern

11. How about
useReducer with
Context API？
re-rendering
problem

12. How about useReducer with Context
API？
It will face re-rendering problem.

13. Recoil
Core API
- Atoms
- Selectors

14. Atoms

15. Selectors

16. Asynchronous processing
- Redux Thunk
- Redux Saga
with Redux

17. With Recoil

18. Atom Family

19. selectorFamily

20. Other API
- useRecoilValueLoadable
- useRecoilCallback
- useRecoilSnapshot
.etc

21. React
- useRecoilValueLoadable
- useRecoilCallback
- useRecoilSnapshot
.etc

22. Architecture
ViewAtoms
Recoil
Selectors
API
DB
Server
Front
Repository Hooks Logic
How to test?

23. Directory
PJ Pages
Components
Recoil
hooks
Atoms
Selectors
hooks

24. Summary
- easy
- simple
- minimum

25. Thank you!