GitHub

Github.com/nanxiaobei/…

Just add a React Context problem

In the React Hooks project, we don’t need traditional state management tools like Redux anymore. We use the React Context function.

In a project, if you add only one Context, there will be no isolation between states if there are too many states.

That is, every time the Context is updated, all state users are rerendered — x is updated, and components that only use Y are rerendered.

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

Code 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>
  );
};
Copy the code

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

Such development, what experience is not quite good place?

We write a lot of duplicate code.

Adding each Context requires createContext(), copying and pasting < xxxContext.provider >, and adding it to the App. In short, there is a lot of boilerplate code to write.

What if I want to add more contexts? You have to keep replicating exactly the same job.

How can I easily add multiple contexts?

With react-Easy-Contexts, the example above could run for this context:

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>
  );
};
Copy the code

The code was immediately much cleaner.

Yes, using the CREATE () and useProvider() apis, you don’t have to write boilerplate code like createContext < xxxContext.provider > every time you create a Context.

In the simplest and most intuitive way, maintain multiple contexts at a glance.

The useProvider(CTX) is passed to the CTX returned by create(). Use ctx.useX, ctx.useY, ctx.useZ hooks to get the Context.

React-easy-contexts, the simplest Context adding tool

React-easy-contexts is a utility for adding multiple contexts.

See GitHub for more information.

Making address:

Github.com/nanxiaobei/…

Online examples:

Codesandbox. IO/s/react – eas…