Introduction

Many developers are looking for a solution to handle a react app global state away from Redux. So, I have created this package to simplify global state management for small and medium sized apps

Basic usage

npm i @morefaie/react-useglobalstate
# or
yarn add @morefaie/react-useglobalstate

Initializing State

In your App.js file (or the top file of components that will use the global state) import the global state provider, initialize the global state and wrap your app components with the provider.

import GlobalStateProvider from "@morefaie/react-useglobalstate";

// ...

const initialGlobalState = {
  isUserLoggedIn: false,
};

const App = () => {
  // ...

  return (
    <GlobalStateProvider state={initialGlobalState}>
      {/* You app entry components here */}
    </GlobalStateProvider>
  );
};

export default App;

To access the global state from any component:

import { useGlobalState } from "@morefaie/react-useglobalstate";

// ...

const SampleComponent = () => {
  const [isUserLoggedIn, setIsUserLoggedIn] = useGlobalState("isUserLoggedIn");

  // ...
};

Decoupled States

The previously mention usage will work fine but has a performance impact if you have many global states that are not related. Updating any state key will cause all the components that uses useGlobalState to re-render.

If you want to define decoupled state just pass the decoupled prop to the state provider and define your initial state as follows:

import GlobalStateProvider from "@morefaie/react-useglobalstate";

// ...

const initialGlobalState = {
  user: {
    isLoggedIn: false,
  },
  global: {
    language: "en",
  },
};

const App = () => {
  // ...

  return (
    <GlobalStateProvider state={initialGlobalState} decoupled>
      {/* You app entry components here */}
    </GlobalStateProvider>
  );
};

export default App;

To access the global state from any component:

import { useGlobalState } from "@morefaie/react-useglobalstate";

// ...

const SampleComponent = () => {
  const [isUserLoggedIn, setIsUserLoggedIn] = useGlobalState("user.isLoggedIn");

  // ...
};

const AnotherSampleComponent = () => {
  const [appLang, setAppLang] = useGlobalState("global.lang");

  // ...
};

const YetAnotherSampleComponent = () => {
  const [isUserLoggedIn, setIsUserLoggedIn] = useGlobalState("user.isLoggedIn");
  const [appLang, setAppLang] = useGlobalState("global.lang");

  // ...
};

Consider that the components in the example above are rendered in the same page. Mutating the isLoggedIn state will cause only SampleComponent and YetAnotherSampleComponent to re-render.

Examples

Normal Global State

Decoupled Global State

With ❤️ from Mohamed El-Refaie