I'm going to show you how to share a hook's state between components.
Example
We have three components: Label, Increment, and Decrement. The goal is for the count in the Label to update when either the Increment or Decrement button is clicked.
A live example of following code can be found here:
https://codesandbox.io/p/sandbox/houp-sample-forked-w9rlht
// App.tsx
root.render(
<>
<App />
</>
);
// index.tsx
const App = () => {
return (
<>
<Label />
<Increment />
<Decrement />
</>
);
};
// useCounter.ts
export default function useCounter() {
const [count, setCount] = useState(0);
const decrease = () => setCount(count - 1);
const increase = () => setCount(count + 1);
return {
count,
decrease,
increase,
};
}
// label.tsx
export default function Label() {
const counter = useCounter();
return (
<div>Count: {counter.count}</div>
);
}
// increment.tsx
export default function Increment() {
const counter = useCounter();
return (
<button onClick={counter.increase}>Increment</button>
);
}
// decrement.tsx
export default function Decrement() {
const counter = useCounter();
return (
<button onClick={counter.decrease}>Decrement</button>
);
}
If you run the example from the link above, you'll see that this code doesn't work. This is because a custom hook is designed to share logic, not state directly.
Share a hook's state globally
Let's use https://github.com/houpjs/houp to share useCounter hook's state globally.
A live example of following code can be found here:
https://codesandbox.io/p/sandbox/houp-sample-forked-rfq6j3
// provider.ts
export const Provider = createProvider([useCounter]);
// App.tsx
root.render(
<Provider>
<App />
</Provider>
);
// index.tsx
const App = () => {
return (
<>
<Label />
<Increment />
<Decrement />
</>
);
};
// useCounter.ts
export default function useCounter() {
const [count, setCount] = useState(0);
const decrease = () => setCount(count - 1);
const increase = () => setCount(count + 1);
return {
count,
decrease,
increase,
};
}
// label.tsx
export default function Label() {
const counter = useStore(useCounter);
return (
<div>Count: {counter.count}</div>
);
}
// increment.tsx
export default function Increment() {
const counter = useStore(useCounter);
return (
<button onClick={counter.increase}>Increment</button>
);
}
// decrement.tsx
export default function Decrement() {
const counter = useStore(useCounter);
return (
<button onClick={counter.decrease}>Decrement</button>
);
}
In this revised version, we create a Provider and add it at the root of the app. Then, we call useStore(useCounter) to access the global state.
Now, run the example from the link above, and you'll see that this code works like a charm.