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.

sneha2004sahani2004

Yeah, globals can work, but they get messy fast. Context is safer but can trigger extra rerenders.
Zustand’s nice middle ground, data’s outside React, so you don’t get the rerender storm, but still have a clean, predictable store.

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!

realJSOP

I tried to up-vote your answer, but it looks like they've disabled that for now.

Graeme_Grant

@realJSOP said in Global Variables rather than context:

I tried to up-vote your answer, but it looks like they've disabled that for now.

Thanks ... early days...