The Context API is a new feature in React 16.3 that allows components to share state globally without having to pass props down through intermediate components. It solves the problem of "prop drilling". The API works by creating a Context object that allows a component to subscribe to changes in a parent component. Any component can consume the Context to access the shared state without being nested inside the parent component. The document provides an overview of how to create Context objects, consume context in child components, update context values, and best practices for using Context including avoiding unnecessary re-renders and keeping code DRY with higher-order components.

1. Context API
Lucas Lira Gomes <@x8lucas8x>

2. Software Engineer
Passionate Hacker
ArchLinux Zealot
FOSS Enthusiast
I’m fond of doing
things that last
and all that jazz.
Lucas Lira Gomes
2
contact@x8lucas8x.com
linkedin.com/in/x8lucas8x
facebook.com/x8lucas8x
youtube.com/X80lucas08X
twitter.com/x8lucas8x
x8lucas8x.com
github.com/x8lucas8x

3. Context API
● Built in
○ React 16.3
● Solution for
○ “Prop-drilling”

4. That rings a bell
● Idea is not novel
○ Experimental API
■ 16.X
● Mobx
○ @inject
● React-intl
○ @injectIntl
● React-redux
○ @connect
● React-router
○ @withRouter

5. API Overview
● React.createContext(defaultValue);
○ <Producer value={...}/>
○ <Consumer>
{context => (...)}
</Consumer>

6. Single Context
import React, { Component } from 'react';
const ContextA = React.createContext();
class ParentComponent extends Component {
state = {data: "SomeValue"};
render() {
return (
<ContextA.Provider value={this.state}>
{this.props.children}
</ContextA.Provider>
...
const ChildComponent = () => (
<ContextA.Consumer>
{context=> <h1>{context.data}</h1>}
</ContextA.Consumer>
);

7. Multiple Contexts
import React, { Component } from 'react';
const ContextA = React.createContext();
const ContextB = React.createContext();
class ParentComponent extends Component {
state = {data: "SomeValue"};
render() {
return (
<ContextA.Provider value={this.state.dataA}>
<ContextB.Provider value={this.state.dataB}>
{this.props.children}
</ContextB.Provider>
</ContextA.Provider>
...
const ChildComponent = () => (
<ContextA.Consumer>
{ctxA => (
<ContextB.Consumer>
{ctxB => <h1>{ctxA} or {ctxB}</h1>}
</ContextB.Consumer>
)}
</ContextA.Consumer>
);

8. Updating the Context
...
const ContextB = React.createContext();
class ParentComponent extends Component {
state = {
isClicked: false,
onClick: () => this.setState({isClicked: true})
};
render() {
return (
<ContextA.Provider value={this.state}>
{this.props.children}
</ContextA.Provider>
...
const ChildComponent = () => (
<ContextA.Consumer>
{context => (
<button onClick={context.onClick}>
Click me!
</button>
)}
</ContextA.Consumer>
);

9. Applications
● “Global” for a tree
○ Localisation
○ Routing
○ Theme
○ User
○ ...

10. Good Practices

11. Avoid re-renders
● Use the state
○ Referential identity
import React, { Component } from 'react';
const ContextA = React.createContext();
class ParentComponent extends Component {
render() {
return (
<ContextA.Provider value={{clicked: true}}>
{this.props.children}
</ContextA.Provider>
...

12. Keep it DRY
● HOCs to the rescue
import React, { Component } from 'react';
const WhateverContext = React.createContext();
export function withWhatever(Component) {
return function ThemedComponent(props) {
return (
<WhateverContext.Consumer>
{context => (
<Component
{...props}
whatever={context.whatever}
/>
)}
</WhateverContext.Consumer>
);
};
}

13. References
1. https://reactjs.org/docs/context.html
13

14. Context API
Lucas Lira Gomes <@x8lucas8x>