Right now using useState with useContext requires a LOT of boilerplate. For every context you have to custom provider, which as we have seen, can be a pain in the but. For what ever reason, Facebook refuses to fix this, so we have other libraries:
These are the ones I found helpful, but ultimately you're still using an external library to do something React already does itself. Surely there is a way to do this in React without all the boilerplate etc!?
useProvider
So I created the useProvider hook in the previous post in the series as an experiment. It basically uses a map to store objects so that you can retrieve them whenever you want.
That post was probably one of my least popular posts, and I realized why. You can't store a useState object in a map, at least not while keeping the reactivity.
As I always planned, I went back and thought about it to figure out how to do it.
🤔💡ðŸ’
What if we store the contexts in the map instead of the state itself? Ok, honestly, I'm not sure what my brain was thinking, but I some how (maybe accidently) figured out how to do that. You still have one universal provider, and you can grab any state (even reactive) by the context. Review the previous posts to see this evolution:
use-provider.tsx
'use client';
import {
FC,
ReactNode,
createContext,
useContext,
type Context,
useState
} from "react";
const _Map = <T,>() => new Map<string, T>();
const Context = createContext(_Map());
export const Provider: FC<{ children: ReactNode }> = ({ children }) =>
<Context.Provider value={_Map()}>{children}</Context.Provider>;
const useContextProvider = <T,>(key: string) => {
const context = useContext(Context);
return {
set value(v: T) { context.set(key, v); },
get value() {
if (!context.has(key)) {
throw Error(`Context key '${key}' Not Found!`);
}
return context.get(key) as T;
}
}
};
This is the same code from the first post, just renamed to useContextProvider. However, now we are going to use this as a helper function for the real useProvider hook:
export const useProvider = <T,>(key: string, initialValue?: T) => {
const provider = useContextProvider<Context<T>>(key);
if (initialValue !== undefined) {
const Context = createContext<T>(initialValue);
provider.value = Context;
}
return useContext(provider.value);
};
Here is what is happening. The useContextProvider just creates a universal provider that can store anything in a map. Again, see the first post. useProvider creates a new context for whatever value is passed in, and sets that as a value to the key you pass in. I know this sounds confusing, so imagine this:
container
<Provider>
---- my app components
</Provider>
simplified set value (pseudocode)
// create a new map and set that as value of universal provider
const providers = new Map()
providers.set('count', createContext(0))
<Context.Provider value={provider} />
simplified get value (pseudocode)
// get the 'count' key from universal provider
// which returns a context, use that context to get counter
const providers = useContext(Provider)
const countContext = providers.get('count')
const counter = useContext(countContext.value)
I'm not sure if that makes sense, but that is in its simplest form what is happening. To use it, you simply call it like this:
Parent
// create a state context
const state = useState(0);
useProvider('count', state);
Child
const [count, setCount] = useProvider('count')
And that's it!!!
You can have as many providers you want with ONE SINGLE UNIVERSAL PROVIDER. Just name it whatever you like. No more context hell!
However, I didn't stop there. You pretty much are always going to want to share state, so why not make that automatic too!
export const useSharedState = <T,>(key: string, initialValue?: T) => {
let state = undefined;
if (initialValue !== undefined) {
const _useState = useState;
state = _useState(initialValue);
}
return useProvider(key, state);
};
This helper function will allow you to just use the provider like a state hook anywhere!
Parent
const [count, setCount] = useSharedState('count', 0);
Child / Sibling / Grand Child
const [count, setCount] = useSharedState<number>('count');
Remember count is the context name, and 0 is the initial value. That's literally it! Works like a charm everywhere. You still need to include the ONE UNIVERSAL PROVIDER in your root:
page.tsx
import Test from "./test";
import { Provider } from "./use-provider";
export default function Home() {
return (
<Provider>
<Test />
</Provider>
);
}
Final Code
use-provider.tsx
'use client';
import {
FC,
ReactNode,
createContext,
useContext,
type Context,
useState
} from "react";
const _Map = <T,>() => new Map<string, T>();
const Context = createContext(_Map());
export const Provider: FC<{ children: ReactNode }> = ({ children }) =>
<Context.Provider value={_Map()}>{children}</Context.Provider>;
const useContextProvider = <T,>(key: string) => {
const context = useContext(Context);
return {
set value(v: T) { context.set(key, v); },
get value() {
if (!context.has(key)) {
throw Error(`Context key '${key}' Not Found!`);
}
return context.get(key) as T;
}
}
};
export const useProvider = <T,>(key: string, initialValue?: T) => {
const provider = useContextProvider<Context<T>>(key);
if (initialValue !== undefined) {
const Context = createContext<T>(initialValue);
provider.value = Context;
}
return useContext(provider.value);
};
export const useSharedState = <T,>(key: string, initialValue?: T) => {
let state = undefined;
if (initialValue !== undefined) {
const _useState = useState;
state = _useState(initialValue);
}
return useProvider(key, state);
};
This is not a lot of code for the power it provides! It will save you so much boilerplate!
Note: I did a trick above for conditional useState by setting it as an uncalled function first if you find that interesting :)
- GitHub repo
- StackBlitz - (if loading error, use CodeSandBox)
- CodeSandBox
I'm sure I missed something here, but this seems to be amazing. If I ever decide to actually use react (I love Svelte and Qwik!), I would definitely use this custom hook: useProvider.
Let me know if I missed something!
J
Current rebuilding code.build
Update 3-10-24
Here is a compilate for a reusable use-shared.ts file.
'use client';
import {
FC,
ReactNode,
createContext,
useContext,
type Context
} from "react";
const _Map = <T,>() => new Map<string, T>();
const Context = createContext(_Map());
export const Provider: FC<{ children: ReactNode }> = ({ children }) =>
<Context.Provider value={_Map()}>{children}</Context.Provider>;
const useContextProvider = <T,>(key: string) => {
const context = useContext(Context);
return {
set value(v: T) { context.set(key, v); },
get value() {
if (!context.has(key)) {
throw Error(`Context key '${key}' Not Found!`);
}
return context.get(key) as T;
}
}
};
export const useShared = <T, A>(
key: string,
fn: (value?: A) => T,
initialValue?: A
) => {
const provider = useContextProvider<Context<T>>(key);
if (initialValue !== undefined) {
const state = fn(initialValue);
const Context = createContext<T>(state);
provider.value = Context;
}
return useContext(provider.value);
};
Top comments (4)
Love the enthusiasm in your post and the content itself. I think your idea will help me with my current context hell. If it does I will defo point to your post in my documentation.
Thanks for posting your findings.
This is so frickin’ easy to use… I love stuff like this! Well done!
No real idea what's going on here. 😅
Does this give you precise updates? Or as precise as you can get in React... I mean, will it update only the components that use a specific state from the collection, and only when that specific state is updated?
If two states are updated synchronously, will it issue only one update?
And so on. State managers have to satisfy a lot of subtle performance requirements...
All you're doing is sharing a state in a context. This is nothing new. The state handles the updates, not the context. I didn't re-invent the wheel here. If you share a context with a state, usually the effected states both get updated. I have not tested this, but I don't see this working any differently than expected. Ask yourself, what does
useStatewith a context provider do normally in your app.