Sharing State Beyond React Components: Global Variables and Alternatives

Beyond Props: Managing Application-Wide State

React’s component-based architecture encourages data to flow down the component tree via props. However, there are scenarios where you need to share data across many components, potentially even those that aren’t directly related. This is where the concept of application-wide state comes in. While React offers powerful mechanisms like Context and state management libraries (Redux, Zustand, etc.), sometimes a simpler approach is desired. This tutorial explores different ways to share data beyond individual components, including the use of global variables, and discusses their trade-offs.

Why Not Just Use Props?

Passing props down through multiple layers of components (prop drilling) can become cumbersome and reduce code maintainability. When a piece of data is needed by many components, it’s often more efficient to make it accessible globally. However, it’s important to consider the implications for code organization and potential side effects.

Option 1: Leveraging Global Variables (with Caution)

Traditionally, global variables have been used to share data across applications. In JavaScript, variables declared outside any function have global scope. However, excessive use of global variables can lead to naming conflicts, make code harder to reason about, and introduce unexpected side effects. If you choose this approach, exercise extreme caution and consider these best practices:

• Limited Scope: Minimize the number of global variables you use.
• Clear Naming: Use descriptive names to avoid conflicts.
• Immutability: After initialization, prevent modification of the global variable to maintain predictability.
• Single Source of Truth: Ensure only one component initializes the global variable.

Here’s an example of how to declare and use a global variable in a React application:

// config.js (or a similar file)
let globalConfig = {
  apiEndpoint: 'https://example.com/api',
  theme: 'light'
};

Object.freeze(globalConfig); // Prevent modification

export default globalConfig;

// index.js (or your main application file)
import globalConfig from './config';

// Now, any component can access globalConfig

// AnyComponent.jsx
import globalConfig from './config';

function AnyComponent() {
  return (
    <div>
      API Endpoint: {globalConfig.apiEndpoint}
      Theme: {globalConfig.theme}
    </div>
  );
}

Important Considerations: While simple, this approach can easily become unmanageable in larger applications. It’s crucial to document the purpose of each global variable and enforce immutability to prevent unexpected behavior.

Option 2: Using globalThis

globalThis is a modern, cross-platform way to access the global object in JavaScript. It’s particularly useful when targeting multiple environments (browsers, Node.js, etc.). It provides a more reliable alternative to older methods like window (browser-specific) or global (Node.js-specific).

// appGlobals.ts
let app: globalAppVariables;

type globalAppVariables = {
  messageLimit: number;
};

globalThis.app = {
  messageLimit: 10,
};

Object.freeze(globalThis.app);

// AnyComponent.tsx
const chatGroupQuery = useQuery(GET_CHAT_GROUP_WITH_MESSAGES_BY_ID, {
  variables: {
    chatGroupId,
    messageLimit: globalThis.app.messageLimit,
  },
});

This approach is cleaner than relying on potentially undefined window or global objects, but still carries the same risks associated with global state.

Option 3: Context API (Recommended)

React’s Context API provides a more structured and React-friendly way to share data across components without explicitly passing props through every level. It avoids the pitfalls of global variables while still providing a convenient way to manage application-wide state.

// ThemeContext.js
import React, { createContext, useState } from 'react';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// AnyComponent.jsx
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function AnyComponent() {
  const { theme } = useContext(ThemeContext);

  return (
    <div style={{ backgroundColor: theme === 'light' ? 'white' : 'black', color: theme === 'light' ? 'black' : 'white' }}>
      Current Theme: {theme}
    </div>
  );
}

The Context API promotes a more predictable data flow and makes your code easier to maintain and test.

Choosing the Right Approach

• Simple Configuration: For very simple configuration values that rarely change, global variables or globalThis might be acceptable, but always enforce immutability.
• Complex State: For more complex application state that needs to be updated frequently, React’s Context API is the preferred solution.
• Large Applications: For large applications with significant state management needs, consider using a dedicated state management library like Redux, Zustand, or MobX.

Remember to prioritize code clarity, maintainability, and predictability when choosing a solution for sharing state beyond individual React components. Avoid global state whenever possible and leverage React’s built-in mechanisms or dedicated libraries to manage application state effectively.