Last Updated: {new Date(profile.lastUpdated).toLocaleString()}
\n
\n
\n );\n}\n\nexport default AsyncProfile;\n```\n\n### Custom hooks\nCan't find your cases in this documentation examples? You can create custom hooks by yourself.\nHere is complex example you can refer the pattern to create another custom hooks cases.\n```js\n// file: stores/account.js\n...\nimport useStore from \"swr-global-state\";\n\nconst KEY = \"@app/account\";\n\nfunction useAccount() {\n const [loading, setLoading] = useStore({\n key: `${KEY}-loading`,\n initial: true\n });\n const [account, setAccount, swrDefaultResponse] = useStore(\n {\n key: KEY,\n initial: null,\n persistor: {\n onSet: (key, accountData) => {\n window.localStorage.setItem(String(key), JSON.stringify(accountData));\n },\n onGet: async(key) => {\n if (window.navigator.onLine) {\n const remoteAccount = await fetch('/api/account');\n return remoteAccount.json();\n }\n const cachedAccount = window.localStorage.getItem(String(key));\n setLoading(false);\n return JSON.parse(cachedAccount);\n }\n }\n },\n {\n /**\n * set another SWR config here\n * @see https://swr.vercel.app/docs/options#options\n * @default on `swr-global-state`:\n * revalidateOnFocus: false\n * revalidateOnReconnect: false\n * refreshWhenHidden: false\n * refreshWhenOffline: false\n */\n revalidateOnFocus: true,\n revalidateOnReconnect: true\n }\n );\n\n /**\n * Destructuring response from SWR Default response\n * @see https://swr.vercel.app/docs/options#return-values\n */\n const { mutate, error } = swrDefaultResponse;\n\n const destroyAccount = async () => {\n setLoading(true);\n await fetch('/api/account/logout');\n window.localStorage.removeItem(KEY);\n // use default `mutate` from SWR to avoid `onSet` callback in `persistor`\n mutate(null);\n setLoading(false);\n };\n\n const updateAccount = async (newAccountData) => {\n setLoading(true);\n await fetch('/api/account', {\n method: 'POST',\n body: JSON.stringify(newAccountData)\n ...\n })\n setAccount(newAccountData);\n setLoading(false);\n };\n\n // your very custom mutator/dispatcher\n\n return {\n loading,\n error,\n account,\n updateAccount,\n destroyAccount\n };\n}\n\nexport default useAccount;\n```\nThen, use that custom hooks in your component as usual.\n```jsx\n// file: App.js\n...\nimport useAccount from \"stores/account\";\n\nfunction App() {\n const {\n account,\n updateAccount,\n destroyAccount,\n loading,\n error\n } = useAccount();\n\n const onLogout = async () => {\n await destroyAccount()\n // your very logic\n }\n\n if (loading) {\n return
Loading...
;\n }\n\n if (error) {\n return
An Error occured
;\n }\n\n return (\n
\n
Account Detail: {JSON.stringify(account)}
\n \n {/* your very component to update account */}\n
\n );\n}\n\nexport default App;\n```\n\n# Demo\nYou can see live demo [here](https://swr-global-state-demo.gading.dev/)\n\n**Featured Demos:**\n- **Basic Counter**: Simple state management without persistence\n- **Persisted Counter**: State that survives page refreshes using localStorage\n- **Async Counter**: Demonstrates async operations with loading states and debounce rate limiting\n- **Async Profile**: Complex nested state management with multiple async operations\n- **Rate Limit Demo**: Search functionality with throttle rate limiting to prevent excessive calls\n- **Custom Rate Limiting**: Advanced rate limiting combining debounce and throttle strategies\n\n# AI/LLM Usage\n\nFor AI assistants and Large Language Models (LLMs) working with this library, we provide comprehensive usage rules and patterns to help understand and implement `swr-global-state` effectively.\n\n## AI Usage Rules\n\nA detailed guide for AI assistants is available that covers:\n- Core concepts and API reference\n- Usage patterns and best practices\n- Persistence strategies (localStorage, AsyncStorage)\n- Rate limiting techniques (debounce, throttle, custom)\n- Error handling and async state management\n- Common implementation patterns\n\n**📖 View the complete AI usage rules:** [llm-rules.md](https://raw.githubusercontent.com/gadingnst/swr-global-state/refs/heads/main/llm-rules.md)\n\nThis guide is specifically designed to help AI assistants:\n- Understand the library's architecture and patterns\n- Generate appropriate code examples\n- Implement best practices for different use cases\n- Handle edge cases and error scenarios\n- Optimize performance with rate limiting\n\n# FAQ\n## Why should I use this?\n- If you want to manage your global state like `useState` as usual.\n- If you want to manage your global state without involving in setting up Provider Component, Dispatcher, Reducer, etc.\n- If you want to see `Redux` or `Context API` alternative.\n- If you're already use `SWR`, but you have no idea how to manage synchronous global state with `SWR` on client-side.\n- If you're still use `Redux` or `Context API`, but you are overwhelmed with their flow.\n- If you need built-in rate limiting for performance optimization.\n- If you want async state management with loading states out of the box.\n\n## If this library can cover `Redux`, how about asynchronous state management like `redux-saga`, `redux-thunk`, or `redux-promise`?\n[SWR](https://swr.vercel.app) can cover this. [see](https://github.com/vercel/swr/discussions/587).\n\nAt this point, `swr-global-state` is based and depends on [SWR](https://www.npmjs.com/package/swr). After version `>2` or later, `swr-global-state` now can handle *async state* too. Just wraps your *very async state logic* into a function like in [Custom Hooks](#custom-hooks) or [Asynchronous Persistor](#asynchronous-persistor).\n\nAdditionally, `swr-global-state` provides built-in rate limiting strategies (debounce, throttle, custom) that help optimize performance for frequent state updates, which is especially useful for async operations.\n\nSo, you basically don't need to use `Redux` or `Context API` anymore. Alternatively, you can choose [TanStack Query](https://tanstack.com/query) or default [SWR](https://swr.vercel.app) itself.\n\n## React Native\nSince [SWR itself supports React Native](https://swr.vercel.app/docs/advanced/react-native), of course `swr-global-state` supports it too. [This example](#asynchronous-persistor) is using `Async Storage` in React Native.\n\n***Things to note***, you must install `swr-global-state` version `>2` or later, because it has customizable `persistor`. So, you can customize the `persistor` with `React Native Async Storage`.\n\nUnder version `<2`, `swr-global-state` still use `localStorage` and we can't customize it. So, it doesn't support React Native.\n\n# Publishing\n- Before pushing your changes to Github, make sure that `version` in `package.json` is changed to newest version. Then run `npm install` for synchronize it to `package-lock.json`\n- After your changes have been merged on branch `main`, you can publish the packages by creating new Relase here: https://github.com/gadingnst/swr-global-state/releases/new\n- Create new `tag`, make sure the `tag` name is same as the `version` in `package.json`.\n- You can write Release title and notes here. Or you can use auto-generated release title and notes.\n- Click `Publish Release` button, then wait the package to be published.\n\n# License\n`swr-global-state` is freely distributable under the terms of the [MIT license](https://github.com/gadingnst/swr-global-state/blob/master/LICENSE).\n\n# Feedbacks and Issues\nFeel free to open issues if you found any feedback or issues on `swr-global-state`. And feel free if you want to contribute too! 😄\n\n# Support\n## Global\n[](https://ko-fi.com/gadingnst)\n## Indonesia\n- [Trakteer](https://trakteer.id/gadingnst)\n- [Karyakarsa](https://karyakarsa.com/gadingnst)\n\n---\n\nBuilt with ❤️ by [Sutan Gading Fadhillah Nasution](https://github.com/gadingnst) on 2022\n","readmeFilename":"README.md"}