# 用 Jotai 打造更輕量的 React 狀態管理 - 林敏皓(Terry)

{%hackmd @JSDC2024/INuUpOqWS42gD1_pz5S4Bg %}

Slido：
https://app.sli.do/event/8KNZmmC5S3JU9hEXV7saaJ

Slide：https://www.canva.com/design/DAGYkRkL6PA/aIysZxOFAM3Q420qzuQHWw/edit

> 開始做筆記
[state-of-frontend](https://tsh.io/state-of-frontend/)
https://jotai.org/

## Chanllenges

### Current State Managements
- React Context API
- Redundant Rerendering
- Redux
- Template Code is too much
- Zustand
- API 比較直觀
-

## Core Concept
- Redux 彷彿一個需要提出申請的大水庫
- Context API 公用水井
- Jotai 小水井(由下往上)

### Comparison

## Pros and Cons

## How to Use

countAtom = atom(0);
    
function Component() {
    const [count, setCount] = useAtom(countAtom);
    
    const count2 = useAtomValue(countAtom);
    
    const setCount2 = useSetAtom(countAtom);
}    

## Implementation

## 導入經驗
- 130 states gathered in one Context...
- Performance affected

Why jotai?
- Small size
- use React Hook
- Low learning curve

- 分割頁面內有哪些狀態
- 分別一一列出
- 分批修改與測試
- 共用文件讓大家知道目前的進度
- Checkpoint 檢查達成進度

Challenges
- PM 討論
- 還技術債！否則有利息
-
- 多 atom 維護


Re-render Checking Tool
- [React Scan](https://react-scan.com/)

## Q & A
1. From Recoil
> In Experiment in Meta
> In Meta jotai is used more and more

> 聊天區

By David Peng
How to debug

const _myAtom = atom(originalValue);
const myAtom = atom(
    get => get(_myAtom),
    (_, set, value) => {
        debugger; // <-- HERE
        set(value);
    }
)