Global Variables rather than context

[realJSOP]

Since contexts (and Zustand) just appear to be wrappers around state variables (which cause re-renders when changed), i implemented an exported globalVars object in App.tsx to keep track of a few things that change all the time.

export interface IGLOBAL_VARS {
    value1: string | null;
    value2: string | null;
    remoteFn: () => void;
};

export const globalVars: IGLOBAL_VARS = {
    value1:null,
    value2:null,
    remoteFn:null,
};
// called when a module is initially navigated to
export const resetGlobalVars = () => {
    globalVars.value1 = null;
    globalVars.value2 =  null;
    globalsVars.remoteFn = null;
}

I'm aware this isn't a very "reacty" pattern, but it was the best I could come up with to avoid re-renders, but at the same time make some things available to all components without a lot of internal gyrations (we have a bunch of non-standard UI requirements).

Comments? Opinions? Guidance?

[Graeme_Grant]

@realJSOP said in Global Variables rather than context:

Since contexts (and Zustand) just appear to be wrappers around state variables (which cause re-renders when changed)

Zustand sits outside of the state, so it doesn't directly cause rerenders.

[realJSOP]

I thought all state changes caused re-renders.

[Graeme_Grant]

@realJSOP said in Global Variables rather than context:

I thought all state changes caused re-renders.

Zustand does cause UI updates in React, but only for the components that subscribe to the part of the store that changed.

Here’s how it works:

• Zustand provides a global store (kind of like Redux, but simpler).
• When you call useStore((state) => state.someValue), your component subscribes to someValue.
• If someValue changes (and the equality check shows it’s actually a new value), Zustand triggers a re-render only for that component.
• Other components that subscribe to different parts of the store won’t re-render unless their slice changes.

Example:

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return (
    <button onClick={increment}>
      Count: {count}
    </button>
  );
}

• Clicking the button calls increment(), which updates count in the store.
• Zustand detects the change and re-renders only the Counter component (since it subscribed to state.count).

So... Zustand doesn’t trigger a global re-render like a context provider might. It’s selective and efficient.

[realJSOP]

well, zustand seems to work pretty well. I'm using the createSelectors paradigm and it's pretty easy to understand and use.

[Graeme_Grant]

@realJSOP said in Global Variables rather than context:

well, zustand seems to work pretty well. I'm using the createSelectors paradigm and it's pretty easy to understand and use.

Glad to hear! I agree, it is far better and more flexible!