REACT:

the Context API

by Gian Marco Toso - @gianmarcotoso

self employed / polarityb.it

starting at 11:30

The Context API

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

- Official React Docs

React.createContext(defaultValue)

returns both a Provider and a Consumer

const { Provider, Consumer } = React.createContext('light')

Wrapping a component tree with a Provider makes it so that every time its value changes, all the contained Consumers automatically re-render.

return (
    <Provider value={this.state.theme}>
        <MyApp />
    </Provider>
)

const MyApp = () => (
    <Consumer>
        {theme => (
            <Application useTheme={theme} />
        )}
    <Consumer>
)

By Gian Marco Toso

A short overview of the Context API

Drinking coffee and saving the world. Software Engineer and professional geek