Skip to content

React Context

Why Context?

  • global state that anyone can access
    • no prop drilling

Example uses

data used by a ton of components

What to reach for before using Context?

Context vs Redux

Using Context

// defaultValue used when there isn't a matching Context in the tree above
// defaultValue = undefined? it won't be used
const MyContext = React.createContext(defaultValue);

Context.displayName

MyContext.displayName = "MyContext";

used in React Dev Tools

Without displayName

without-display-name.png

With displayName

with-display-name.png

Create a custom hook

let devs know that if you use this hook, it has to be in a provider

  • creating a CountProvider component wrapper
    • so that it can have its own state and hooks to manage the state
    • instead of directly using <ToggleContext.Provider value={{count, setCount}}>...<!--...-->
  • you can pass count and setCount as the value of the Provider

useCount wrapper for better errors

function useToggle() {
    const context = React.useContext(ToggleContext);
    if (!context) {
        throw new Error("useToggle must be within a ToggleContext");
    }
    return context;
}

Last update: 2022-11-04