[{"_1":2,"_120":-5,"_121":-5},"loaderData",{"_3":4},"routes/web/blog/post-slug/route",{"_5":6,"_51":52,"_116":117,"_118":119},"meta",{"_7":8,"_35":36},"metaTags",[9,12,17,20,22,25,28,31,33],{"_10":11},"title","Jotai vs. Zustand React State Management",{"_13":14,"_15":16},"name","description","content","簡潔的 Jotai API vs. 全能的 Zustand\n\n在 Jotai docs 就有簡單說明他跟 useContext / Zustand / Recoli 的差別，詳細可以看 Large objects — Jotai。我看下來，簡單來說差異主要是在儲存的地方，Jotai 主要把狀態存在「context level」而 Zustand 則是存在「module level」（在 app 外全域儲存）",{"_18":19,"_15":11},"property","og:title",{"_18":21,"_15":16},"og:description",{"_18":23,"_15":24},"og:type","website",{"_18":26,"_15":27},"og:url","https://www.yinc.tw/blog/jotai-vs.-zustand-react-state-management",{"_13":29,"_15":30},"twitter:card","summary_large_image",{"_13":32,"_15":11},"twitter:title",{"_13":34,"_15":16},"twitter:description","seo",{"_37":38,"_39":11,"_40":16,"_41":-5,"_42":-5,"_43":44,"_45":46,"_47":48,"_49":50},"id",2,"metaTitle","metaDescription","keywords","ogImage","autoGenerated",true,"route","/blog/jotai-vs.-zustand-react-state-management","createdAt",["D",1752466276066],"updatedAt",["D",1753644093132],"post",{"_37":38,"_53":54,"_10":55,"_15":56,"_57":58,"_59":-5,"_60":61,"_62":63,"_47":64,"_49":65,"_66":38,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":78,"_79":80,"_35":96,"_99":100,"_114":115},"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],"seoId","prevId",48,"nextId",4,"prevTitle","VSCode Forward Port、Inline Blame、Copilot，加速你的開發速度！","prevSlug","vscode-forward-port-inline-blame-copilot-加速你的開發速度","nextTitle","Automatically Generate Sitemap in React Router v7","nextSlug","automatically-generate-sitemap-in-react-router-v7","author",{"_37":63,"_13":81,"_82":83,"_84":44,"_85":86,"_47":87,"_49":88,"_89":90,"_91":92,"_93":94,"_95":-5},"Yin","email","yin@yinc.me","emailVerified","image","https://placecats.com/300/200",["D",1744040568491],["D",1744040568491],"role","admin","banned",false,"banReason","","banExpires",{"_37":38,"_39":11,"_40":16,"_41":-5,"_42":-5,"_43":44,"_45":46,"_47":97,"_49":98},["D",1752466276066],["D",1753644093132],"tags",[101,104,108,111],{"_37":38,"_13":102,"_53":103,"_14":94},"Jotai","jotai",{"_37":105,"_13":106,"_53":107,"_14":94},3,"Zustand","zustand",{"_37":70,"_13":109,"_53":110,"_14":94},"Context","context",{"_37":112,"_13":113,"_53":113,"_14":94},5,"狀態","categories",[],"nextPost",{"_10":76,"_53":78},"prevPost",{"_10":72,"_53":74},"actionData","errors"]