Downloaded 14 times
Uploaded byLucas Lira Gomes
Context API in React
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.
Context API in React
- 1. Context API Lucas LiraGomes <@x8lucas8x>
- 2. Software Engineer Passionate Hacker ArchLinuxZealot 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 ● Builtin ○ React 16.3 ● Solution for ○ “Prop-drilling”
- 4. That rings abell ● 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 ... constContextB = 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” fora tree ○ Localisation ○ Routing ○ Theme ○ User ○ ...
- 10.
- 11. Avoid re-renders ● Usethe 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.
- 14. Context API Lucas LiraGomes <@x8lucas8x>