Back to home

React Context Basics main image

React Context Basics

Basic Introduction

SystemDescription
PropsGet data from a parent component to a direct child component
ContextGets data from a parent component to any nested child component

An App with Context

A basic app where we want to pass context of things like language everywhere.

class App extends Component { state = { langauge: "english" }; onLanguageChange = (language) => this.setState({ language }); render() { // return elements with onClick to change state } }

Getting Data Out of Context

  1. Create context file
  2. Set contextType as static property to class
  3. Consume from this.context
  4. Update the context using the Provider

// context/language/index.js import React from 'react'; // creating context with default 'english' export default React.createContext('english'); // inside of a component import LanguageContext from 'path/to/file'; export default class Button extends React.Component { static contextType = LanguageContext; render() { const text = this.context === 'english' ? 'Submit' : 'Voorleggen'; return <button>{text}</button> } }

To update the context, from a higher provider we could set...

class App extends Component { state = {langauge: 'english'}; onLanguageChange = language => this.setState({language}); render() { // return elements with onClick to change state <LanguageContext.Provider value={this.state.language}> <ChildThatContainsButton> </LanguageContext.Provider> } }

Gotchas Around Context

The big gotcha with the context is dealing with the value prop given to the provider.

Alternative Consumption of Data with Consumers

// context/language/index.js import React from 'react'; // creating context with default 'english' export default React.createContext('english'); // inside of a component import LanguageContext from 'path/to/file'; export default class Button extends React.Component { render() { return <button> <LanguageContext.Consumer> {value => value === 'english' ? 'Submit' : 'Voorleggen'} </LanguageContext.Consumer> </button> } }

Using Multiple Consumers

// context/language/index.js import React from 'react'; // creating context with default 'english' export default React.createContext('english'); // inside of a component import LanguageContext from 'path/to/file'; export default class Button extends React.Component { render() { return <button> <ColorContext.Consumer> {color => { <LanguageContext.Consumer> {value => value === 'english' ? 'Submit' : 'Voorleggen'} </LanguageContext.Consumer> }} </ColorContext.Consumer> </button> } }

Context vs Redux

ReduxContext
Excellent documentationNo need for extra lib
Well-known for design patternsHard to build a 'store' component with cross cutting concerns
Tremendous amount of open source libs
Personal image

Dennis O'Keeffe

@dennisokeeffe92
  • Melbourne, Australia

Hi, I am a professional Software Engineer. Formerly of Culture Amp, UsabilityHub, Present Company and NightGuru.
I am currently working on Visibuild.

1,200+ PEOPLE ALREADY JOINED ❤️️

Get fresh posts + news direct to your inbox.

No spam. We only send you relevant content.