Entity Context

App Root

Context provides a way to pass data through the component tree without having to pass props down manually at every level

- React Docs

When to use

To share informations that can be considered "global" for a tree of React components

eg. current authenticated user, theme, or preferred language

...and state management, why not...

How it works

const MyContext = React.createContext(defaultValue);

Creates a new context object

When a component that uses the context is rendered, it will get the value from the closest matching provider

The defaultValue is used only when there is no matching providers

<MyContext.Provider value={/* some value */}>

Every Context object comes with a Provider component

The value prop is passed down to all consuming components

All consumers will re-render whenever the Provider’s value prop changes

// Class-based approach
<MyContext.Consumer>
  {value => /* render something based on the context value */}
</MyContext.Consumer>


// Hooks-based approach
const value = useContext(MyContext);

Subscribes to context changes

The value is equal to the value passed to the closest provider

The component will re-render if value changes

export const themes = {
  light: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
};

export const ThemeContext = React.createContext(
  themes.dark // default value
);

Example

Theme context

function App() {
    const [currentTheme, setCurrentTheme] = useState('expedia');

    return (
        <Page>
            <Header>
                <ThemeSwitch onChange={setCurrentTheme} />
            </Header>
            <Main>
                <ThemeContext.Provider value={currentTheme}>
                    ...
                </ThemeContext.Provider>
            </Main>
        </Page>
    )
}

Example

App

function ForgottenButton({ children, onClick }) {
    const currentTheme = useContext(ThemeContext);

    return (
        <button onClick={onClick} className={`button theme-${currentTheme}`}>
            {children}
        </button>
    )
}

Example

Somewhere in the deepest of your app tree ...