Back to home

Basic IntroductionAn App with ContextGetting Data Out of ContextAlternative Consumption of Data with ConsumersContext vs Redux
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.

1 2 3 4 5 6 7 8 9 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 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...

1 2 3 4 5 6 7 8 9 10 11 12 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // 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

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 workingoutloud.dev, Den Dribbles and LandPad .

Related articles


1,200+ PEOPLE ALREADY JOINED ❤️️

Get fresh posts + news direct to your inbox.

No spam. We only send you relevant content.