);
};
export default App;
```
------------
### Complete examples:
#### [Several counters, one value](https://codesandbox.io/s/v6zz2nwow5 "CodeSandBox")
Add as many counters as you want, it will all share the same global value.
Every time one counter add 1 to the global value, all counters will render.
The parent component won't render again.
------------
#### [Asynchronous ajax requests](https://codesandbox.io/s/wqvykj5497 "CodeSandBox")
Search GitHub repos by username.
Handle the ajax request asynchronously with async/await.
Update the requests counter on every search.
------------
#### [Avoid unnecessary renders](https://codesandbox.io/s/several-counters-pdbsy "CodeSandBox")
Map a subset of the global state before use it.
The component will only re-render if the subset is updated.
------------
#### [Connecting to a class component](https://codesandbox.io/s/connect-a-class-component-rgbf1 "CodeSandBox")
Hooks can't be used inside a class component.
We can create a Higher-Order Component that connects any class component with the state.
With the connect() function, state and actions become props of the component.
------------
#### [Immutable state with Immer.js integration](https://codesandbox.io/s/immer-integration-e1hpj "CodeSandBox")
Add Immer.js lib on your hook options to manage complex immutable states.
Mutate a state draft inside a setState function.
Immer will calculate the state diff and create a new immutable state object.
------------
### Using TypeScript
Install the TypeScript definitions from DefinitelyTyped
```
npm install @types/use-global-hook
```
Example implementation
```typescript
import globalHook, { Store } from 'use-global-hook';
// Defining your own state and associated actions is required
type MyState = {
value: string;
};
// Associated actions are what's expected to be returned from globalHook
type MyAssociatedActions = {
setValue: (value: string) => void;
otherAction: (other: boolean) => void;
};
// setValue will be returned by globalHook as setValue.bind(null, store)
// This is one reason we have to declare a separate associated actions type
const setValue = (
store: Store,
value: string
) => {
store.setState({ ...store.state, value });
store.actions.otherAction(true);
};
const otherAction = (
store: Store,
other: boolean
) => { /* cool stuff */ };
const initialState: MyState = {
value: "myString"
};
// actions passed to globalHook do not need to be typed
const actions = {
setValue,
otherAction
};
const useGlobal = globalHook(
initialState,
actions
);
// Usage
const [state, actions] = useGlobal();
// Subset
const [value, setValue] = useGlobal void>(
(state: MyState) => state.value,
(actions: MyAssociatedActions) => actions.setValue
);
// Without declaring type, useGlobal will return unknown
const [state, actions] = useGlobal(); // returns [unknown, unknown]
// Happy TypeScripting!
```
---
_Source: https://npm.io/package/use-global-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._