React18 Legacy Context

import PropTypes from 'prop-types';

class ThemeProvider extends React.Component {
  static childContextTypes = {
    theme: PropTypes.string,
    toggleTheme: PropTypes.func,
  };

  state = { theme: 'light' };

  toggleTheme = () => {
    this.setState(s => ({ theme: s.theme === 'light' ? 'dark' : 'light' }));
  };

  getChildContext() {
    return {
      theme: this.state.theme,
      toggleTheme: this.toggleTheme,
    };
  }

  render() {
    return this.props.children;
  }
}

import PropTypes from 'prop-types';

class ThemedButton extends React.Component {
  static contextTypes = {
    theme: PropTypes.string,
    toggleTheme: PropTypes.func,
  };

  render() {
    const { theme, toggleTheme } = this.context;
    return (
      <button className={`btn btn-${theme}`} onClick={toggleTheme}>
        Toggle Theme
      </button>
    );
  }
}

// Function components couldn't use legacy context cleanly
// They had to use a class wrapper or render prop

import React from 'react';

// Default value matches the shape of getChildContext() return
export const ThemeContext = React.createContext({
  theme: 'light',
  toggleTheme: () => {},
});

// Named export for the context - both provider and consumers import from here

import React from 'react';
import { ThemeContext } from '../contexts/ThemeContext';

class ThemeProvider extends React.Component {
  state = { theme: 'light' };

  toggleTheme = () => {
    this.setState(s => ({ theme: s.theme === 'light' ? 'dark' : 'light' }));
  };

  render() {
    // React 19 JSX shorthand: <ThemeContext value={...}>
    // React 18: <ThemeContext.Provider value={...}>
    return (
      <ThemeContext.Provider
        value={{
          theme: this.state.theme,
          toggleTheme: this.toggleTheme,
        }}
      >
        {this.props.children}
      </ThemeContext.Provider>
    );
  }
}

export default ThemeProvider;

import React from 'react';
import { ThemeContext } from '../contexts/ThemeContext';

class ThemedButton extends React.Component {
  // singular contextType (not contextTypes)
  static contextType = ThemeContext;

  render() {
    const { theme, toggleTheme } = this.context;
    return (
      <button className={`btn btn-${theme}`} onClick={toggleTheme}>
        Toggle Theme
      </button>
    );
  }
}

export default ThemedButton;

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

function ThemedHeader({ title }) {
  const { theme } = useContext(ThemeContext);
  return <h1 className={`header-${theme}`}>{title}</h1>;
}

import { ThemeContext } from '../contexts/ThemeContext';
import { AuthContext } from '../contexts/AuthContext';

class Dashboard extends React.Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {({ theme }) => (
          <AuthContext.Consumer>
            {({ user }) => (
              <div className={`dashboard-${theme}`}>
                Welcome, {user.name}
              </div>
            )}
          </AuthContext.Consumer>
        )}
      </ThemeContext.Consumer>
    );
  }
}

# Provider - no legacy context exports remain
grep -n "childContextTypes\|getChildContext" src/ThemeProvider.js

# Consumers - no legacy context consumption remains
grep -rn "contextTypes\s*=" src/ --include="*.js" --include="*.jsx" | grep -v "ThemeContext\|\.test\."

# this.context usage - confirm it reads from contextType not legacy
grep -rn "this\.context\." src/ --include="*.js" | grep -v "\.test\."