Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/clayrisser/use-state-cache
react hook to cache state
https://github.com/clayrisser/use-state-cache
async asyncstorage cache hook localstorage react state use
Last synced: about 2 months ago
JSON representation
react hook to cache state
- Host: GitHub
- URL: https://github.com/clayrisser/use-state-cache
- Owner: clayrisser
- License: mit
- Created: 2020-06-22T12:22:08.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-07-12T09:05:44.000Z (over 1 year ago)
- Last Synced: 2024-12-08T20:53:53.849Z (2 months ago)
- Topics: async, asyncstorage, cache, hook, localstorage, react, state, use
- Language: TypeScript
- Homepage: https://codejam.ninja
- Size: 1.05 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# use-state-cache
[](https://github.com/codejamninja/use-state-cache)
> react hook to cache state
I built this hook to cache and hydrate state based on the same amazing `setState` api.
Please ★ this repo if you found it useful ★ ★ ★
## Features
- supports react web
- supports react native
## Installation
```sh
npm install --save use-state-cache
```
## Usage
The lifecycle of the `useStateCache` hook differs slightly from the `useState` hook.
```
import useStateCache from 'use-state-cache';
const [state, setState] = useStateCache('key', 'initial state');
```
You must provide a key to identify the location in cache that the state is stored in. It is safe
to use the same key in separate components if you are accessing the same data.
Note that the `todos` value is `undefined` until the cache is loaded. If the cache
is empty or invalid, `todos` is initialized with the initial state. If the cache is valid, `todos`
is initialized (hydrated) with the cache.
If the `setState` function is executed before `todos` has been initialized (before the cache has been
loaded) then a warning will be logged. If the provider's `strict` prop is set to `true`, then an error
will be thrown if `setState` is executed before `todos` has been initialized.
To prevent calling `setState` before initialization, simply ignore the `setState` function while the
state is undefined. You can see in the example, I render `
Loading . . .` when `todos` is
undefined.
#### Setup the provider
```ts
import React, { FC } from 'react';
import Todo from './Todo';
import { Provider as UseStateCacheProvider } from 'use-state-cache';
export interface AppProps {}
const App: FC = (props: AppProps) => (
);
export default App;
```
#### Use the hook
```ts
import React, { FC, useState } from 'react';
import useStateCache from 'use-state-cache';
export interface TodoProps {}
const Todo: FC = (props: TodoProps) => {
const { todo, setTodo } = useState('');
const { todos, setTodos } = useStateCache('todos', []);
function handleClick() {
if (todos) setTodos([...todos, todo]);
}
if (!todos) return
Loading . . .;
return (
setTodo(e.target.value)}
/>
Add Todo
{JSON.stringify(todos)}
);
};
export default Todo;
```
### Provider Props
| prop | default | description |
| ----------- | ---------------------------- | ----------------------------------------------------------------------------------- |
| `enabled` | `true` | enable caching (when disabled, behavior is exactly like `setState`) |
| `namespace` | name found in `package.json` | namespace keys in storage |
| `silence` | `false` | silence warnings |
| `strict` | `false` | throw error when `setState` is called before state is initialized (cache is loaded) |
## Support
Submit an [issue](https://github.com/codejamninja/use-state-cache/issues/new)
## Contributing
Review the [guidelines for contributing](https://github.com/codejamninja/use-state-cache/blob/master/CONTRIBUTING.md)
## License
[MIT License](https://github.com/codejamninja/use-state-cache/blob/master/LICENSE)
[Jam Risser](https://codejam.ninja) © 2020
## Changelog
Review the [changelog](https://github.com/codejamninja/use-state-cache/blob/master/CHANGELOG.md)
## Credits
- [Jam Risser](https://codejam.ninja) - Author
## Support on Liberapay
A ridiculous amount of coffee ☕ ☕ ☕ was consumed in the process of building this project.
[Add some fuel](https://liberapay.com/codejamninja/donate) if you'd like to keep me going!
[](https://liberapay.com/codejamninja/donate)
[](https://liberapay.com/codejamninja/donate)