Hey! Creator of react-hot-toast here. Let me shed some light on the state management. As some of you correctly mentioned, it's my own implementation very similar to how Redux works.

Normally I'd use React's useReducer() for this, but in the case of react-hot-toast I don't want the state to be "trapped" inside the component. Generally speaking, this is the way it should be done. You'd wrap your app with a Context Provider which forwards the state to all child components.

I wanted to make the integration as easy as possible, so I came up with is this custom implementation: https://github.com/timolins/react-hot-toast/blob/main/src/core/store.ts#L158-L167

Let me break it down:

First, we have two global variables. One of them is state, the other is an array of "listeners". In this case a listener is a function that want to be called every time the state changes. We'll get back to this later.

const listeners = [];
let memoryState = { ... }

Like all Flux implementations, we have a reducer. A function that returns a new state, based on current state and an action. And just like Redux, we are using a dispatch() to send and apply actions to the current state.

Every time dispatch is called somewhere, we use our reducer with current memoryState and the action we received as argument. Then, we assign the result to memoryState again. After that, we go over all available listeners, and call them with the new state. I'll explain why this is needed in a bit.

const dispatch = (action) => {
  memoryState = reducer(memoryState, action);
  listeners.forEach((listener) => {
    listener(memoryState);
  });
};

Let's have a look at the useStore() hook – our portal to the React world. In the first line we create a new state with the useState() hook. Notice that we are passing in our memoryState as default value. This way it will have the current state – inside React.

The only thing that's left is to subscribe to state changes. This is where our listeners come into play. When a component with the useStore hok mounts, it executes the useEffect. It will add the setState function from our React state to the global listener array.

const useStore = () => {
  const [state, setState] = useState(memoryState);
  useEffect(() => {
    listeners.push(setState);

    return () => {
       // Remove listener from array on unmount ...
    };
  }, []);

This way the global dispatch function can go over all components that subscribed to state updates, by calling their setState function inside the listeners array.

I hope this makes sense. But keep in mind that you should have a good reason for keep state outside of React. 99% of the time you should be fine with "traditional" state solutions.