At our last react meetup, Deploying React Application with Confidence, our speaker, Huad, dive deep into context API by showing you the latest tips, tricks, and the Do’s and Don’ts of context API so that you can make the most effective use out of it.

1. REACT CONTEXT
React Meetup
18.08.21

2. JIRACHAI URAIJAREE (HUAD)
Full-stack Developer

3. INTRODUCTION & APIs
DIVE DEEPER & TIPS
EXAMPLES

4. INTRODUCTION & APIs
DIVE DEEPER & TIPS
EXAMPLES

5. In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are
required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.
When to Use Context Before You Use Context API React.createContext Context.Provider Class.contextType Context.Consumer Context.displayName Examples Dynamic Context Updating Context
from a Nested Component Consuming Multiple Contexts Caveats Legacy API When to Use Context Context is designed to share data that can be considered “global” for a tree of React components,
such as the current authenticated user, theme, or preferred language. For example, in the code below we manually thread through a “theme” prop in order to style the Button component:
Etiam massa nunc, ultricies ac velit nec, dignissim ultrices turpis. Etiam vel sodales justo. Phasellus scelerisque id ante ac fermentum. Curabitur ut vulputate nisl. Vestibulum et lorem
erat. Phasellus at tempus lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce rutrum blandit tortor, at congue odio suscipit eget. Nunc felis orci,
fermentum id neque sit amet, tempor volutpat eros.
Before You Use Context Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component
reuse more difficult. If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context.
Aliquam eu dapibus sapien. Maecenas eu felis id nibh pellentesque ultrices sed at risus. Vivamus blandit, massa quis tempus convallis, arcu est vehicula sapien, vitae tristique purus
metus sed dui. Curabitur ultricies libero varius accumsan mollis. Nullam venenatis magna lobortis, ornare nisl quis, mollis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Praesent quis quam et tortor commodo tincidunt.
Creates a Context object. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching Provider above it in the
tree. The defaultValue argument is only used when a component does not have a matching Provider above it in the tree. This default value can be helpful for testing components in isolation
without wrapping them. Note: passing undefined as a Provider value does not cause consuming components to use defaultValue.
Proin non dictum odio. Maecenas mattis augue eu mi pulvinar blandit. Integer iaculis non lacus vitae efficitur. In commodo, nisi ut rutrum rhoncus, massa sapien tempus nulla, et
tincidunt nulla dolor a justo. Aenean euismod metus a varius bibendum. Suspendisse urna sem, auctor in cursus ac, pharetra ut elit. Praesent eget dignissim purus. Nulla eu neque pharetra, facilisis
eros a, luctus turpis. Nullam venenatis, arcu nec condimentum ullamcorper, diam ante efficitur dolor, vitae accumsan nibh purus eget massa. Sed dignissim auctor viverra. Suspendisse placerat
vehicula tortor, ut laoreet urna condimentum interdum. Proin libero diam, eleifend sed felis a, bibendum convallis nibh.
Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes. The Provider component accepts a value prop to be
passed to consuming components that are descendants of this Provider. One Provider can be connected to many consumers. Providers can be nested to override values deeper within the tree. All
consumers that are descendants of a Provider will re-render whenever the Provider’s value prop changes. The propagation from Provider to its descendant consumers (including .contextType and
useContext) is not subject to the shouldComponentUpdate method, so the consumer is updated even when an ancestor component skips an update. Changes are determined by comparing the
new and old values using the same algorithm as Object.is.
A React component that subscribes to context changes. Using this component lets you subscribe to a context within a function component. Requires a function as a child. The function
receives the current context value and returns a React node. The value argument passed to the function will be equal to the value prop of the closest Provider for this context above in the tree. If
there is no Provider for this context above, the value argument will be equal to the defaultValue that was passed to createContext().
Because context uses reference identity to determine when to re-render, there are some gotchas that could trigger unintentional renders in consumers when a provider’s parent re-
renders. For example, the code below will re-render all consumers every time the Provider re-renders because a new object is always created for value:
INTRODUCTION & APIs
What’s Context?

6. “Context provides a way to pass data through the component tree
without having to pass props down manually at every level.”
- https://reactjs.org/docs/context.html
“ Another way allowing you to implicitly share data (state) between components ”
-
me
INTRODUCTION & APIs
What’s Context?

7. INTRODUCTION & APIs
State sharing by passing props
const Parent = () => {
const state = 1;
return (
<>
<Child state={state} />
<Child state={state} />
<Child state={state} />
</>
);
};

8. Props Drilling 𑁋 Passing prop(s) down multiple levels
INTRODUCTION & APIs
Props Drilling
const GrandParent = () => <Parent state={state} />;
const Parent = () => <Child state={state} />;
const Child = () => <GrandChild state={state} />;
const GrandChild = () => <p>{state}</p>;

9. INTRODUCTION & APIs
Props Drilling - The problem
Unnecessary re-renders in component tree
Flashing border == Component re-renders

10. INTRODUCTION & APIs
Creating Context instance
import { createContext } from "react";
const ColorContext = createContext(undefined);

11. INTRODUCTION & APIs
Context Provider
const MainApp = () => {
const [currentColor, setCurrentColor] = useState("");
return (
<ColorContext.Provider value={{ currentColor, setCurrentColor }}>
<SetColorButtons />
<GrandParent />
</ColorContext.Provider>
);
};

12. INTRODUCTION & APIs
Consuming Context
import { useContext } from "react";
const SetColorButtons = () => {
const colorContextValue = useContext(ColorContext);
return (
...buttons with onClick={() => colorContextValue.setCurrentShape(color)}
);
};

13. INTRODUCTION & APIs
Consuming Context
import { useContext } from "react";
const Color = () => {
const colorContextValue = useContext(ColorContext);
return (
<div style={{ background: colorContextValue.currentColor }}>
Color: {color}
</div>
);
};

14. INTRODUCTION & APIs
Passing data with Context
[Consumer] useContext(ColorContext)
[Provider] <ColorContext.Provider>

15. INTRODUCTION & APIs
DIVE DEEPER & TIPS
EXAMPLES

16. DIVE DEEPER & TIPS
Consuming Context Outside Provider
const MainApp = () => {
const [currentColor, setCurrentColor] = useState("");
return (
<>
<GrandParent />
<ColorContext.Provider value={{ currentColor, setCurrentColor }}>
<SetColorButtons />
<GrandParent />
</ColorContext.Provider>
</>
);
};

17. DIVE DEEPER & TIPS
Default Error Message

18. DIVE DEEPER & TIPS
Consuming Context Outside Provider
const Color = () => {
const colorContextValue = useContext(ColorContext);
return (
<div style={{ background: colorContextValue.currentColor }}>
Color: {color}
</div>
);
};
const ColorContext = createContext(undefined);

19. DIVE DEEPER & TIPS
Consuming Context Outside Provider
const MainApp = () => {
const [currentColor, setCurrentColor] = useState("");
return (
<>
<GrandParent />
<ColorContext.Provider value={{ currentColor, setCurrentColor }}>
<SetColorButtons />
<GrandParent />
</ColorContext.Provider>
</>
);
};

20. DIVE DEEPER & TIPS
Custom Error Message
const Color = ({ color }) => {
const colorContextValue = useContext(ColorContext);
if (!colorContextValue) {
throw new Error("ColorContext must be used within ColorProvider");
}
return (
<div style={{ background: colorContextValue.currentColor }}>
Color: {color}
</div>
);
};

21. DIVE DEEPER & TIPS
Abstraction
const ColorProvider = ({ children }) => {
const [currentColor, setCurrentColor] = useState("");
return (
<ColorContext.Provider
value={{ currentColor, setCurrentColor }}
>
{children}
</ColorContext.Provider>
);
};
const MainApp = () => {
return (
<ColorProvider>
<SetColorButtons />
<GrandParent />
</ColorProvider>
);
};

22. DIVE DEEPER & TIPS
Abstraction
const useColor = () => {
const colorContextValue = useContext(ColorContext);
if (!colorContextValue) {
throw new Error("useColor must be used within ColorProvider");
}
return useContext(ColorContext);
};
const Color = () => {
const colorContextValue = useColor();
return (
<div style={{ background: colorContextValue.currentColor }}>
Color: {color}
</div>
);
};

23. DIVE DEEPER & TIPS
Simple drawing app!

24. DIVE DEEPER & TIPS
Global state
const PaintContext = createContext(undefined);
const PaintProvider = ({ children }) => {
const [currentShape, setCurrentShape] = useState("");
const [currentColor, setCurrentColor] = useState("");
const value = {
currentShape,
currentColor,
setCurrentShape,
setCurrentColor,
};
return <PaintContext.Provider value={value}>{children}</PaintContext.Provider>;
};
const usePaint = () => {
const paintContextValue = useContext(PaintContext);
if (!paintContextValue) {
throw new Error("usePaint must be used within PaintProvider");
}
return paintContextValue;
};

25. DIVE DEEPER & TIPS
Provider at root level
const App = () => {
return (
<PaintProvider>
<Header />
<MainLayout>
<LeftPanel />
<RightPanel />
</MainLayout>
</PaintProvider>
);
};
const PaintPreview = () => {
const { currentShape, currentColor } = usePaint();
return <RenderedObject shape={currentShape} color={currentColor} />;
};
const ShapePreview = () => {
const { currentShape } = usePaint();
return <RenderedObject shape={currentShape} />;
};
const ColorPreview = () => {
const { currentColor } = usePaint();
return <div>{currentColor}</div>;
};
const ShapeSelection = () => {
const { setCurrentShape } = usePaint();
return ...buttons with onClick={() => setCurrentShape(shape)}
};
const ColorSelection = () => {
const { setCurrentColor } = usePaint();
return ...buttons with onClick={() => setCurrentShape(color)}
};

26. DIVE DEEPER & TIPS
Global state at root level
[Provider] <PaintContext.Provider>
[Consumer]
const { currentShape,currentColor} = usePaint();
[Consumer]
const { currentShape } = usePaint();
[Consumer]
const { currentColor } = usePaint();
[Consumer]
const { setCurrentShape } = usePaint();
[Consumer]
const { setCurrentColor } = usePaint();

27. DIVE DEEPER & TIPS
Move Provider closer to where it’s needed
const App = () => {
return (
<>
<Header />
<PaintProvider>
<MainLayout>
<LeftPanel />
<RightPanel />
</MainLayout>
</PaintProvider>
</>
);
};

28. ShapePreview & ShapeSelection does NOT need
to re-render when color changed
DIVE DEEPER & TIPS
Problem with Global State
... Vice Versa

29. DIVE DEEPER & TIPS
Breaking global state into smaller related states
const PaintContext = createContext(undefined);
const PaintProvider = ({ children }) => {
const [currentShape, setCurrentShape] = useState("");
const [currentColor, setCurrentColor] = useState("");
const value = {
currentShape,
currentColor,
setCurrentShape,
setCurrentColor,
};
return <PaintContext.Provider value={value}>{children}</PaintContext.Provider>;
};
const usePaint = () => {
const paintContextValue = useContext(PaintContext);
if (!paintContextValue) {
throw new Error("usePaint must be used within PaintProvider");
}
return paintContextValue;
};

30. DIVE DEEPER & TIPS
Break into 2 Contexts
const ShapeContext = createContext(undefined);
const ShapeProvider = ({ children }) => {
const [currentShape, setCurrentShape] = useState("");
const value = { currentShape, setCurrentShape };
return <ShapeContext.Provider value={value}>{children}</ShapeContext.Provider>;
};
const useShape = () => {
const shapeContextValue = useContext(ShapeContext);
if (!shapeContextValue)... throw error ...
return shapeContextValue;
};
const ColorContext = createContext(undefined);
const ColorProvider = ({ children }) => {
const [currentColor, setCurrentColor] = useState("");
const value = { currentColor, setCurrentColor };
return <ColorContext.Provider value={value}>{children}</ColorContext.Provider>;
};
const useColor = () => {
const colorContextValue = useContext(ColorContext);
if (!colorContextValue)... throw error ...
return colorContextValue;
};

31. DIVE DEEPER & TIPS
Abstraction layer (Optional)
const PaintProvider = ({ children }) => {
return (
<ShapeProvider>
<ColorProvider>{children}</ColorProvider>
</ShapeProvider>
);
};

32. DIVE DEEPER & TIPS
Consuming Context separately
const PaintPreview = () => {
const { currentShape } = useShape();
const { currentShape } = useColor();
return <RenderedObject shape={currentShape} color={currentColor} />;
};
const ShapePreview = () => {
const { currentShape } = useShape();
return <RenderedObject shape={currentShape} />;
};
const ColorPreview = () => {
const { currentColor } = useColor();
return <div>{currentColor}</div>;
};
const ShapeSelection = () => {
const { setCurrentShape } = useShape();
return ...buttons with onClick={() => setCurrentShape(shape)}
};
const ColorSelection = () => {
const { setCurrentColor } = useColor();
return ...buttons with onClick={() => setCurrentShape(color)}
};

33. DIVE DEEPER & TIPS
Consuming Context separately
[Provider] <PaintContext.Provider>
[Consumer]
const { currentShape } = useShape();
const { currentColor } = useColor();
[Consumer]
const { currentShape } = useShape();
[Consumer]
const { setCurrentShape } = useShape();
[Consumer]
const { currentColor } = useColor();
[Consumer]
const { setCurrentColor } = useColor();

34. DIVE DEEPER & TIPS
Unnecessary re-render
ShapeSelection has no reason to re-render
…Same for ColorSelection

35. DIVE DEEPER & TIPS
Prevent re-render with React.memo
import { memo } from "react";
const ShapeSelection = memo(() => {
const { setCurrentShape } = useShape();
return ...buttons with onClick={() => setCurrentShape(shape)}
});

36. DIVE DEEPER & TIPS
React.memo does not stop component from re-rendering

37. DIVE DEEPER & TIPS
Prevent re-render with React.memo
import { memo } from "react";
const ShapeSelection = memo(() => {
const { setCurrentShape } = useShape();
return ...buttons with onClick={() => setCurrentShape(shape)}
});
❌

38. DIVE DEEPER & TIPS
Unnecessary re-render

39. DIVE DEEPER & TIPS
Consuming Context
const PaintPreview = () => {
const { currentShape } = useShape();
const { currentShape } = useColor();
return <RenderedObject shape={currentShape} color={currentColor} />;
};
const ShapePreview = () => {
const { currentShape } = useShape();
return <RenderedObject shape={currentShape} />;
};
const ColorPreview = () => {
const { currentColor } = useColor();
return <div>{currentColor}</div>;
};
const ShapeSelection = () => {
const { setCurrentShape } = useShape();
return ...buttons with onClick={() => setCurrentShape(shape)}
};
const ColorSelection = () => {
const { setCurrentColor } = useColor();
return ...buttons with onClick={() => setCurrentShape(color)}
};

40. DIVE DEEPER & TIPS
Split Context
const ShapeProvider = ({ children }) => {
const [currentShape, setCurrentShape] = useState("");
const value = { currentShape, setCurrentShape };
return <ShapeContext.Provider value={value}>{children}</ShapeContext.Provider>;
};

41. DIVE DEEPER & TIPS
Split Context
const ShapeGetterContext = createContext(undefined);
const ShapeSetterContext = createContext(undefined);
const ShapeProvider = ({ children }) => {
const [currentShape, setCurrentShape] = useState("");
const getterValue = useMemo(() => ({ currentShape }), [currentShape]);
const setterValue = useMemo(() => ({ setCurrentShape }), []);
return (
<ShapeGetterContext.Provider value={getterValue}>
<ShapeSetterContext.Provider value={setterValue}>{children}</ShapeSetterContext.Provider>
</ShapeGetterContext.Provider>
);
};
const useShapeGetter = () => {
const shapeGetterContextValue = useContext(ShapeGetterContext);
if (!shapeGetterContextValue) ... throw error ...
return shapeGetterContextValue;
};
const useShapeSetter = () => {
const shapeSetterContextValue = useContext(ShapeSetterContext);
if (!shapeSetterContextValue) ... throw error ...
return shapeSetterContextValue;
};

42. DIVE DEEPER & TIPS
Split Context

43. DIVE DEEPER & TIPS
Context Display Name in DevTool
ShapeGetterContext.displayName = "ShapeGetterContext";
ShapeSetterContext.displayName = "ShapeSetterContext";
ColorGetterContext.displayName = "ColorGetterContext";
ColorSetterContext.displayName = "ColorSetterContext";

44. INTRODUCTION & APIs
DIVE DEEPER & TIPS
EXAMPLES

45. EXAMPLES
Use cases
● Global State
○ ThemeProvider
○ LocaleProvider
● Compound Component [Flexible & Implicitly share state]
○ CollapsiblePanel

46. EXAMPLES
Use cases
const PanelGetterContext = createContext(undefined);
const PanelSetterContext = createContext(undefined);
PanelGetterContext.displayName = "PanelGetterContext";
PanelSetterContext.displayName = "PanelSetterContext";
const usePanelState = () => {
const context = useContext(PanelGetterContext);
if (context === undefined) throw new Error("...");
return context;
};
const usePanelStateToggle = () => {
const context = useContext(PanelSetterContext);
if (!context) throw new Error("...");
return context;
};
const PanelLabel = ({ children }) => {
const toggle = usePanelStateToggle();
return <div onClick={toggle}>{children}</div>;
};
const PanelDetails = ({ children }) => {
const open = usePanelState();
return open ? <div>{children}</div> : null;
};
const Panel = ({ children }) => {
const [open, setOpen] = useState(false);
const toggle = useCallback(() => setOpen((o) => !o), []);
return (
<PanelGetterContext.Provider value={open}>
<PanelSetterContext.Provider value={toggle}>{children}</PanelSetterContext.Provider>
</PanelGetterContext.Provider>
);
};
<Panel>
<label>Collapsible Panel</label>
<PanelLabel>
<h1>Label</h1>
</PanelLabel>
<PanelDetails>
<h2>Details...</h2>
<p>Details...</p>
</PanelDetails>
</Panel>

47. INTRODUCTION & APIs
Why… When... What...
DIVE DEEPER & TIPS
Do’s… Dont’s… Optimization...
EXAMPLES
Global State… Collapsible Panel...

48. Q&A

49. Thank you for listening
Credits
https://reactjs.org/docs/context.html
https://giphy.com/explore/confused-travolta
https://knowyourmeme.com/memes/feels-good