What

Tiny (around 0.7Kb minzipped) no dependencies utility function to quickly generate (with 1 call) Contexts, Providers and hooks that share the memory efficiently.

Most common scenario is a Store implementation. With Context Provider it's attached to your DOM wherever you want (local or global - you decide).

Why

Defining a Store Context, Provider and hooks (and also Types) requires some boilerplate. We might want the "writing" components to be independent of rendering caused by data changes - then "data" and "API" have to be provided with separate Contexts and hooks (see an awesome article on this topic). Means even more boilerplate.

And if we (for example) have some model and want every field to be changed and rendered independently - it would mean that every field should have its own Context, Provider and hook. The code is pretty standard, but it's a lot of code - see examples below 👇

This simple utility saves you dozens (or even hundreds) of code lines to implement your efficient Contexts/Stores.

How does it work

Every created hook is linked to its dedicated Context under the hood for rendering optimization.

All the generated contexts stack within a single generated ComboProvider wrapper component for convenience. It's easy to forget this fact - that's why generated Provider has a special automatic "...ComboProvider" suffix.

How to use it

You provide (function params)

• provider base name (for the Provider component generation)
• hooks (slices/contexts) names, as many as you want (each hook will be rendered independently due to its individual Context under the hood)
• their shared memory scope (all the data that hooks are going to use, just like a regular hook)
  • with custom parameters for more control (will be Provider props, optional)
  • return an object that maps every hook to the data you need

You get (function returns)

• controllable Provider component
• your generated hooks
• 🎉 with all the names and types ready to be exported right away

Example 1

Simplest Context providing a value (let's provide the useState result: value + setter, no rendering separation)

1import { makeComboProviderAndHooks } from 'react-combo-provider';
2import { useState } from 'react';
3
4// Provider component + hooks generated with all the types, use code completion and export them right away
5export const { CountStoreComboProvider, useCount } = makeComboProviderAndHooks(
6  'countStore', // provider base name (<x>ComboProvider component will be generated, with corresponding displayName)
7  ['count'], // a list of hooks/contexts to generate. Every item generates a <x>Context layer for your Provider and a use<X> hook
8  () => {
9    // provider's props can be defined as an argument here
10    return {
11      // key = Context name (see array above); value = what hook returns (via its own context)
12      count: useState(0), // value for the useCount hook
13    };
14  },
15);

If we omit comments - the code is really compact.

1import React, {
2  createContext,
3  type Dispatch,
4  type PropsWithChildren,
5  type ReactElement,
6  type SetStateAction,
7  useContext,
8  useState,
9} from 'react';
10
11// define a Context type, makeComboProviderAndHooks infers your types automatically
12type Count = [number, Dispatch<SetStateAction<number>>];
13
14// create the Context instance with empty state for Provider check, makeComboProviderAndHooks does it for you
15const CountContext = createContext<Count | null>(null);
16// displayName - makeComboProviderAndHooks generates it too
17CountContext.displayName = 'CountContext';
18
19// Context hook with user-friendly Provider check - makeComboProviderAndHooks generates the same for you
20export function useCount(): Count {
21  const context = useContext(CountContext);
22  if (!context) {
23    throw new Error('useCount must be within CountStoreProvider');
24  }
25  return context;
26}
27
28// Context Provider component with displayName. Also generated by makeComboProviderAndHooks
29export function CountStoreProvider({ children }: PropsWithChildren): ReactElement {
30  return <CountContext.Provider value={useState(0)}>{children}</CountContext.Provider>;
31}

Example 2

Same example, but now we want writers to be independent of changed data - 2 Contexts, 2 hooks (useCount, useSetCount)

1import { makeComboProviderAndHooks } from 'react-combo-provider';
2import { useState } from 'react';
3
4export const { CountStoreComboProvider, useCount, useSetCount } = makeComboProviderAndHooks(
5  'countStore',
6  [
7    'count',
8    'setCount',
9  ], // 2 contexts/hooks
10  () => {
11    const [
12      count,
13      setCount,
14    ] = useState(0);
15
16    return {
17      // key = Context name (see array above); value = what hook returns (with its own context)
18      count, // value for the useCount hook
19      setCount, // value for the useSetCount hook
20    };
21  },
22);

We simply added 1 item to the definition array + 1 property to the returned mapping.

Let's see how equivalent code grows up.

1import React, {
2  createContext,
3  type Dispatch,
4  type PropsWithChildren,
5  type ReactElement,
6  type SetStateAction,
7  useContext,
8  useState,
9} from 'react';
10
11type CountData = number;
12type CountApi = Dispatch<SetStateAction<number>>;
13
14const CountDataContext = createContext<CountData | null>(null);
15CountDataContext.displayName = 'CountDataContext';
16
17const CountApiContext = createContext<CountApi | null>(null);
18CountApiContext.displayName = 'CountApiContext';
19
20export function useCountData(): CountData {
21  const context = useContext(CountDataContext);
22  if (context == null) {
23    throw new Error('useCountData must be within CountStoreProvider');
24  }
25  return context;
26}
27
28export function useCountApi(): CountApi {
29  const context = useContext(CountApiContext);
30  if (!context) {
31    throw new Error('useCountApi must be within CountStoreProvider');
32  }
33  return context;
34}
35
36export function CountStoreProvider({ children }: PropsWithChildren): ReactElement {
37  const [
38    count,
39    setCount,
40  ] = useState(0);
41
42  return (
43    <CountApiContext.Provider value={setCount}>
44      <CountDataContext.Provider value={count}>{children}</CountDataContext.Provider>
45    </CountApiContext.Provider>
46  );
47}

With ComboProvider Context (and Store) creation and rendering optimization have never been easier.