react-easy-contexts: add multiple React contexts in the simplest way

The problem of adding only one React context

In React hooks project, we don’t need traditional Redux and other state management tools, but use React’s own context directly.

In a project, if only one context is added, if there are too many state, there will be no isolation between state.

That is, every time the context is updated, it will trigger the re-render of all state consumers. When x is updated, components that only use y will be re-rendered too.

So in the actual development, we need to add multiple contexts to isolate the state, and only put the related state together.

Example for adding multiple contexts

const XContext = createContext({});
const YContext = createContext({});
const ZContext = createContext({});
const useX = () => useContext(XContext);
const useY = () => useContext(YContext);
const useZ = () => useContext(ZContext);
const XProvider = ({ children }) => {
  const [x, setX] = useState(0);
  const value = useMemo(() => ({ x, setX }), [x]);
  return <XContext.Provider value={value}>{children}</XContext.Provider>;
};
const YProvider = ({ children }) => {
  const [y, setY] = useState(0);
  const value = useMemo(() => ({ y, setY }), [y]);
  return <YContext.Provider value={value}>{children}</YContext.Provider>;
};
const ZProvider = ({ children }) => {
  const [z, setZ] = useState(0);
  const value = useMemo(() => ({ z, setZ }), [z]);
  return <ZContext.Provider value={value}>{children}</ZContext.Provider>;
};
const App = () => {
  return (
    <XProvider>
      <YProvider>
        <ZProvider>
          <AppMain />
        </ZProvider>
      </YProvider>
    </XProvider>
  );
};

In the above example, we added three contexts: XContext YContext and ZContext.

What’s wrong with such development?

— We’ve written a lot of duplicate code.

To add each context, you have to go through the operations of createContext (), copy and paste <XXXContext.Provider>, and add it to App. In short, you need to write a lot of template code.

What if you want to add more context? You can only copy as like as two peas.

How to simply add multiple contexts?

If react-easy-contexts is used, the above example can be as follows:

import { create, useProvider } from 'react-easy-contexts';
const ctx = create({
  useX() {
    const [x, setX] = useState(0);
    return useMemo(() => ({ x, setX }), [x]);
  },
  useY() {
    const [y, setY] = useState(0);
    return useMemo(() => ({ y, setY }), [y]);
  },
  useZ() {
    const [z, setZ] = useState(0);
    return useMemo(() => ({ z, setZ }), [z]);
  },
});
const App = () => {
  const Provider = useProvider(ctx);
  return (
    <Provider>
      <AppMain />
    </Provider>
  );
};

The code immediately refreshed a lot.

Yes, using the two APIs create() and useProvider(), you no longer need to write template code like createContext() <XXXContext.Provider> every time you create a context.

Maintain multiple contexts in the simplest and most intuitive way, which is clear at a glance.

create() returns ctx, and passes in useProvider(ctx). Use ctx.useX, ctx.useY, ctx.useZ hooks to get the context.

react-easy-contexts, the simplest context adding tool

Introducing react-easy-contexts, a simple tool to adding multiple contexts.

See GitHub for more information.

GitHub:

https://github.com/nanxiaobei/react-easy-contexts

Online example:

https://codesandbox.io/s/react-easy-contexts-28f8z