[{"_1":2,"_135":-5,"_136":-5},"loaderData",{"_3":4},"routes/web/blog/layout",{"_5":6,"_7":8,"_54":55},"searchParams","","meta",{"_9":10,"_37":38},"metaTags",[11,14,19,22,24,27,30,33,35],{"_12":13},"title","Jotai vs. Zustand React State Management",{"_15":16,"_17":18},"name","description","content","簡潔的 Jotai API vs. 全能的 Zustand\n\n在 Jotai docs 就有簡單說明他跟 useContext / Zustand / Recoli 的差別，詳細可以看 Large objects — Jotai。我看下來，簡單來說差異主要是在儲存的地方，Jotai 主要把狀態存在「context level」而 Zustand 則是存在「module level」（在 app 外全域儲存）",{"_20":21,"_17":13},"property","og:title",{"_20":23,"_17":18},"og:description",{"_20":25,"_17":26},"og:type","website",{"_20":28,"_17":29},"og:url","https://papacloud.vercel.app/blog/jotai-vs.-zustand-react-state-management",{"_15":31,"_17":32},"twitter:card","summary_large_image",{"_15":34,"_17":13},"twitter:title",{"_15":36,"_17":18},"twitter:description","seo",{"_39":40,"_41":13,"_42":18,"_43":-5,"_44":-5,"_45":46,"_47":48,"_49":40,"_50":51,"_52":53},"id",2,"metaTitle","metaDescription","keywords","ogImage","autoGenerated",true,"route","/blog/jotai-vs.-zustand-react-state-management","postId","createdAt",["D",1752466276066],"updatedAt",["D",1753644093132],"posts",[56],{"_39":40,"_57":58,"_12":59,"_17":60,"_61":62,"_63":-5,"_64":65,"_66":67,"_50":68,"_52":69,"_37":70,"_73":74,"_89":90,"_113":114,"_131":132,"_133":134},"slug","jotai-vs.-zustand-react-state-management","Jotai (状態) React State Management（與 Zustand 微比較）","{\"type\":\"doc\",\"content\":[{\"type\":\"blockquote\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"TL;DR: 如果要找取代 Context 的就用 Jotai，跟 Context 一樣要使用必須有 Provider，也有跟 useState 幾乎一樣的 API，資料存在 Context 層；正在找全域 state 的就用 Zustand，他是存在 Module 層\"}]}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Jotai & Zustand 背景介紹\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"真可愛，這兩個字的意思分別是日文跟德文的「狀態」，都是在 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://pmnd.rs/\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Poimandres\"},{\"type\":\"text\",\"text\":\" 底下的專案，Jotai 作者 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://x.com/dai_shi\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Daishi Kato (@dai_shi) / X\"},{\"type\":\"text\",\"text\":\" 在加入 Poimandres 後開始接手 Zustand 維護，後來又做了 Jotai！\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"簡潔的 Jotai API vs. 全能的 Zustand\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"在 Jotai docs 就有簡單說明他跟 useContext / Zustand / Recoli 的差別，詳細可以看 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://jotai.org/docs/recipes/large-objects\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Large objects — Jotai\"},{\"type\":\"text\",\"text\":\"。我看下來，簡單來說差異主要是在儲存的地方，Jotai 主要把狀態存在「context level」而 Zustand 則是存在「module level」（在 app 外全域儲存），所以 Zustand 用 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"createStore()\"},{\"type\":\"text\",\"text\":\"隨時隨地都能使用，不需要包 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"\"},{\"type\":\"text\",\"text\":\"；而 Jotai 是用 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"atom\"},{\"type\":\"text\",\"text\":\"，必須要在 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"\"},{\"type\":\"text\",\"text\":\" 中才能使用。\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"以下簡單說明 Jotai 的用法：\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Jotai \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"focusAtom\"},{\"type\":\"text\",\"text\":\" 訂閱大 Object 中特定項目\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"如果是用 state 儲存，例如說一篇文章，結構如下：\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"ts\"},\"content\":[{\"type\":\"text\",\"text\":\"const [postRelated, setPostRelated] = useState({\\n author: {},\\n post: {},\\n seo: {},\\n tags: {},\\n categories: {},\\n})\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"壞處顯而易見，即使我只是改個跟內文不相關的 tag / category / author / seo，整個使用到這些東西的 component 都會 rerender，這時候就會需要將整個 PostRelated 拆分成超多項，分別用 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"useState\"},{\"type\":\"text\",\"text\":\" / \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"useContext\"},{\"type\":\"text\",\"text\":\" 存並傳到 child components 中，而且他們兩個裡面的東西並不會自動拆分狀態，牽一髮動全身。\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"這時候 Jotai 的好處就來了！使用 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"focusAtom()\"},{\"type\":\"text\",\"text\":\" 只訂閱特定的 object key，只有當該 atom 內容有改變時才會 rerender：\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"tsx\"},\"content\":[{\"type\":\"text\",\"text\":\"// data comes from server\\nconst postRelatedAtom = atom({\\n author: {},\\n post: {},\\n seo: {},\\n tags: [],\\n categories: [],\\n})\\n\\n// 這樣就直接可以作為新的 atom 使用\\nconst authorAtom = focusAtom(postRelatedAtom, (optic) => optic.prop('author'))\\nconst postAtom = focusAtom(postRelatedAtom, (optic) => optic.prop('post'))\\n\\n// Parent\\nfunction PostLayout() {\\n return (\\n \\n \\n \\n \\n )\\n}\\n\\n// Children\\nfunction PostHeader() {\\n const [authorState, setAuthorState] = useAtom(authorAtom)\\n return \\n}\\nfunction PostContent() {\\n const [postState, setPostState] = useAtom(postAtom)\\n // ... change post to html\\n return \\n}\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null}},{\"type\":\"blockquote\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"現在知道 atom 的概念其實就是一個 syntax 非常簡單，卻可以達到跟 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"useContext\"},{\"type\":\"text\",\"text\":\" 一樣結果的東東，可以想像成在 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"\"},{\"type\":\"text\",\"text\":\" 內，可以隨意取用的 state。\"}]}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null}}]}","excerpt","簡潔的 Jotai API vs. 全能的 Zustand\n\n在 Jotai docs 就有簡單說明他跟 useContext / Zustand / Recoli 的差別，詳細可以看 Large objects — Jotai。我看下來，簡單來說差異主要是在儲存的地方，Jotai 主要把狀態存在「context level」而 Zustand 則是存在「module level」（在 app 外全域儲存）。","featuredImage","status","PUBLISHED","authorId","psRr2HBzP8Fv7Nxyvr45KY4mpcLu1sCY",["D",1752466276066],["D",1753644092565],{"_39":40,"_41":13,"_42":18,"_43":-5,"_44":-5,"_45":46,"_47":48,"_49":40,"_50":71,"_52":72},["D",1752466276066],["D",1753644093132],"author",{"_39":67,"_15":75,"_76":77,"_78":46,"_79":80,"_50":81,"_52":82,"_83":84,"_85":86,"_87":6,"_88":-5},"Yin","email","yin@yinc.me","emailVerified","image","https://placecats.com/300/200",["D",1744040568491],["D",1744040568491],"role","admin","banned",false,"banReason","banExpires","postToTag",[91,99,104,109],{"_49":40,"_92":40,"_93":94,"_95":96},"tagId","order",0,"tag",{"_39":40,"_15":97,"_57":98,"_16":6},"Jotai","jotai",{"_49":40,"_92":100,"_93":94,"_95":101},3,{"_39":100,"_15":102,"_57":103,"_16":6},"Zustand","zustand",{"_49":40,"_92":105,"_93":94,"_95":106},4,{"_39":105,"_15":107,"_57":108,"_16":6},"Context","context",{"_49":40,"_92":110,"_93":94,"_95":111},5,{"_39":110,"_15":112,"_57":112,"_16":6},"狀態","postToCategory",[115,122,127],{"_49":40,"_116":117,"_93":94,"_118":119},"categoryId",116,"category",{"_39":117,"_15":120,"_57":120,"_16":6,"_121":-5},"軟體","parentId",{"_49":40,"_116":123,"_93":94,"_118":124},1,{"_39":123,"_15":125,"_57":126,"_16":6,"_121":-5},"React","react",{"_49":40,"_116":40,"_93":94,"_118":128},{"_39":40,"_15":129,"_57":130,"_16":6,"_121":-5},"State","state","tags",[96,101,106,111],"categories",[119,124,128],"actionData","errors"]