React.js: The Documentary [OFFICIAL TRAILER]
The interactive way to master modern React – react.gg
useState，问题：props drilling，数据流
useContext、Redux、recoil
异步/后端数据 react query、swr
jotai
如果使用 atomWithStorage 出现了奇怪的 Bug，那可能是 SSR 的问题：https://jotai.org/docs/utils/atom-with-storage#server-side-rendering
atomWithStorage 使用 sessionStorage https://jotai.org/docs/guides/persistence#example-with-session-storage
import { atomWithStorage, createJSONStorage } from 'jotai/utils'
const currentUserAtom = atomWithStorage<CurrentUser | null>(
AtomKey.currentUserAtom,
null,
createJSONStorage(() => sesseionStorage)
)
zustand
路由状态
浏览器缓存，sessionStorage 和 localStorage，大部分（颜色模式也许可以除外）没有必要储存在 localStorage 中去 sync across tabs，一些用户偏好的设置或者当前的历史状态，最好是储存在 session 和 local 中，然后 local 作为 session 的 fallback，这样用户操作或者刷新的时候是 session 的缓存，打开新 tab 的时候则是 local 的持久化缓存，可以封装一个 hook：
import { useMemo } from 'react'
import { useLocalStorage, useSessionStorage } from 'usehooks-ts'
const useStorage = <T,>(key: string, initialValue: T) => {
const [session, setSession] = useSessionStorage<T>(key, initialValue)
const [local, setLocal] = useLocalStorage<T>(key, initialValue)
const storedValue = useMemo(() => session || local, [session, local])
// TODO: 当储存的是 Object 的时候，在 useCallback() 更新里面的值会有问题，拷贝的是之前的状态，导致其它状态被刷掉
// <https://github.com/juliencrn/usehooks-ts/blob/2dc20df615b32430b943349e8833b74a1fbc33dc/lib/src/useLocalStorage/useLocalStorage.ts#L45>
const setStoredValue = (value: T) => {
setSession(value)
setLocal(value)
}
return [storedValue, setStoredValue] as const
}
export { useStorage }
Dexie https://dexie.org/
Valtio https://valtio.pmnd.rs/docs/introduction/getting-started
useSignal()