Easily Manage Global UI State

Managing global UI state, like showing a toast notification or a modal, can feel like a chore. You start with good intentions, maybe a simple prop drilling solution. Then, as your app grows, things get messy. You end up passing state down through way too many components, or worse, reaching for a full-blown state management library when all you need is to show a popup.

Let’s be real, not every piece of global UI state needs Redux or Zustand. Often, the simplest solutions are the most effective. We’re going to look at a couple of patterns that keep things clean without overcomplicating your frontend.

The Context API Approach

React’s Context API is often overlooked for simple global state. It’s built-in and does a pretty good job for things that don’t change constantly. For toasts and modals, it’s a solid contender.

Imagine you have a NotificationContext. This context will hold the state for any notifications you want to show (like toast messages) and functions to show/hide them.

1
import React, { createContext, useState, useContext, useCallback } from 'react';
2

3
const NotificationContext = createContext();
4

5
export const useNotification = () => useContext(NotificationContext);
6

7
export const NotificationProvider = ({ children }) => {
8
  const [notification, setNotification] = useState(null);
9

10
  const showNotification = useCallback((message, type = 'info') => {
11
    setNotification({ message, type });
12
  }, []);
13

14
  const hideNotification = useCallback(() => {
15
    setNotification(null);
16
  }, []);
17

18
  return (
19
    <NotificationContext.Provider value={{ notification, showNotification, hideNotification }}>
20
      {children}
21
    </NotificationContext.Provider>
22
  );
23
};

Now, you wrap your application with this provider:

1
import React from 'react';
2
import { NotificationProvider } from './NotificationContext';
3

4
function App() {
5
  return (
6
    <NotificationProvider>
7
      {/* Your app components */}
8
      <MainContent />
9
    </NotificationProvider>
10
  );
11
}
12

13
export default App;

And any component can trigger a notification:

1
import React from 'react';
2
import { useNotification } from './NotificationContext';
3

4
function SomeComponent() {
5
  const { showNotification } = useNotification();
6

7
  const handleClick = () => {
8
    showNotification('Item saved successfully!', 'success');
9
  };
10

11
  return <button onClick={handleClick}>Save Item</button>;
12
}
13

14
export default SomeComponent;

You’ll also need a component to actually render the notification based on the context state. This would typically be placed at the root of your app or somewhere high up.

1
import React from 'react';
2
import { useNotification } from './NotificationContext';
3

4
function NotificationDisplay() {
5
  const { notification, hideNotification } = useNotification();
6

7
  if (!notification) return null;
8

9
  return (
10
    <div className={`notification ${notification.type}`}>
11
      {notification.message}
12
      <button onClick={hideNotification}>X</button>
13
    </div>
14
  );
15
}
16

17
export default NotificationDisplay;

This pattern works great for toasts. For modals, you might expand the context to include modal title, content, and open/close functions. The principle remains the same: a central place to manage the UI state and functions to interact with it.

Custom Hooks for Modals

While Context can manage the state of modals, sometimes a custom hook can provide a cleaner API for triggering them, especially if your modal system is component-based.

Consider a useModal hook. This hook could return a function to open a specific modal and a boolean to check if it’s open. The actual rendering of the modal would still be handled by a global ModalManager component.

1
// ModalManager.js (Conceptual)
2
// This component listens to a global event or a dedicated state
3
// and renders the correct modal component.
4

5
// useModal.js
6
import { useState, useCallback } from 'react';
7

8
// Imagine a global mechanism to trigger modal display
9
// For simplicity, let's assume a global state or event bus
10

11
const useModal = (modalName) => {
12
  // In a real app, this would interact with a global state manager or event emitter
13
  // For this example, let's simulate.
14
  const [isOpen, setIsOpen] = useState(false);
15

16
  const openModal = useCallback(() => {
17
    // Dispatch event to show modal `modalName`
18
    setIsOpen(true);
19
    console.log(`Opening modal: ${modalName}`);
20
  }, [modalName]);
21

22
  const closeModal = useCallback(() => {
23
    // Dispatch event to hide modal
24
    setIsOpen(false);
25
    console.log(`Closing modal: ${modalName}`);
26
  }, [modalName]);
27

28
  return { isOpen, openModal, closeModal };
29
};
30

31
export default useModal;

This useModal hook is useful for components that initiate an action that requires a modal. The actual modal component rendering logic would live elsewhere, perhaps in a dedicated ModalRenderer component that listens for these events or reads from a global context.

Why Keep it Simple?

Over-engineering state management is a common pitfall. For UI elements like toasts and modals, which are often transient and don’t require complex data synchronization, the overhead of larger state management solutions is unnecessary. The Context API, combined with custom hooks, provides a clear, maintainable, and performant way to handle these common UI patterns. You get the global access you need without the baggage.

Focus on the problem you’re trying to solve. If it’s just showing a message or a simple dialog, a lightweight solution is usually best. Keep your codebase clean, your developers happy, and your users well-informed with timely UI feedback.