global-react-state v1.2.3
Global React State
This package provides simple global state management through React hooks.
- No extra files or React components required
- No dependencies but React itself
- Very small bundle size (< 1 kB)
Usage
Create the global state
import createGlobalState from 'global-react-state';
const [useMyState, setMyState, getMyState] = createGlobalState(initialValue);
Use the global state
const MyComponent = () => {
const [myState, setMyState] = useMyState();
// ...
};
Set the global state
The setter function can be called inside or outside a React component.
setMyState(newValue);
If the new state is computed using the previous state, you can pass a function to your state setter.
The function will receive the previous value and return an updated value. For example:
setMyState(oldValue => oldValue + 1);
Get the global state
The getter function should only be called outside a React component.
console.log(getMyState());
If you want to get the state inside a React component, you should use useMyState
instead.
Best Practice
Export and import
You can easily export the hook or the setter from one file and import it into another:
// myState.ts
export const [useMyState, setMyState] = createGlobalState(initialValue);
import { useMyState } from './myState';
Avoid unnecessary re-render attempts
Because the setter function can also be called outside a component, it is never necessary for a component to use a global state hook without using the value of the state:
// ❌ DON'T do this.
import { useMyState } from './myState';
const MyComponent = () => {
const [, setMyState] = useMyState();
// Call `setMyState` in here.
};
This will unnecessarily attempt to re-render the component whenever the state updates, since it is using the hook. Instead, you could simply import the setter without the hook:
// ✅ Do this.
import { setMyState } from './myState';
const MyComponent = () => {
// Call `setMyState` in here.
};
No hook required!
TypeScript Usage
If TypeScript cannot infer your state's type sufficiently, you can explitly define the type using a type parameter on createGlobalState
. For example:
const [useNumbers] = createGlobalState<number[]>([]);
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago