AlgoAnimator: Interactive Data Structures

Global State

useContext()

const value = useContext(MyContext)

Share state "globally" across your component tree without passing props manually at every level. Great for themes, users, or language settings.

useContext Hook

A hook that lets you subscribe to React Context. It allows you to share data (like themes or user info) globally without passing props manually.

Continue

Prop Drilling

Without Context, you have to pass data through every single component level, even if the intermediate components don't need it. This is messy.

Continue

The Provider Pattern

Wrap your app in a `Context.Provider`. Any child component, no matter how deep, can call `useContext` to grab the value directly.

Continue

Complex Objects

Context isn't just for strings. You can share objects containing data AND functions (like setters) to let consumers update the state too.

Continue

Global State Demo

Try toggling the Theme and User state. Notice how multiple components (NavBar, Settings) update instantly because they all subscribe to the same Context.

Continue

1. Create Context

First, create the context object. This will be the source of truth.

ThemeContext.ts

import { createContext } from 'react';

// Create context with a default value
export const ThemeContext = createContext('light');

Define the Context

2. Provide Value

Wrap your component tree in the Provider. The `value` prop is what will be shared.

App.tsx

import { useState } from 'react';
import { ThemeContext } from './ThemeContext';

function App() {
  const [theme, setTheme] = useState('dark');

  return (
    // 🌍 Every component inside here can access 'theme'
    <ThemeContext.Provider value={theme}>
      <Header />
      <MainContent />
    </ThemeContext.Provider>
  );
}

Wrap with Provider

3. Consume Value

Any child component can simply ask for the data using `useContext`.

MyComponent.tsx

import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function MyComponent() {
  // ⚡️ Grab the value directly! No props needed.
  const theme = useContext(ThemeContext);

  return <div className={theme}>I am styled!</div>;
}

Read from Context

4. Complex Values (State + Functions)

Context becomes powerful when you share both the state and the functions to update it.

AuthProvider.tsx

// 1. Context Object
const AuthContext = createContext(null);

// 2. Provider Component
function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = (name) => setUser({ name });
  const logout = () => setUser(null);

  // 3. Pass object with data AND functions
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

Provide State & Actions

LoginButton.tsx

function LoginButton() {
  // 4. Consume and use functions!
  const { user, login, logout } = useContext(AuthContext);

  if (user) {
    return <button onClick={logout}>Log Out</button>;
  }

  return <button onClick={() => login('Alice')}>Log In</button>;
}

Consume & Update

Performance Note

When the Provider's value changes, every component that calls `useContext` will re-render. Be careful not to put too much unrelated data into a single Context context context.