A React context Provider will cause its consumers to re-render whenever the value provided changes.

// first render

<Provider value={1}> // next render

<Provider value={2}> // all consumers will re-render

<Consumer>{value => (/*...*/)}</Consumer>

This no big deal if you’re passing primitive values to value . If you pass 2 multiple times in a row, the consumers won’t re-render.

However, if you’re passing objects then you’ve got to be more careful. The following code will cause consumers to re-render every time the Menu renders, even if nothing in the Menu actually changed (perhaps the component that rendered Menu is changing state).

let MenuContext = React.createContext() class Menu extends React.Component {

constructor() {

super()

this.state = {

value: this.props.defaultValue

}

} setValue(newValue) {

this.setState({ value: newValue })

} render() {

return (

<MenuContext.Provider value={{

value: this.state.value,

setValue: this.setValue

}}>

{/* other stuff */}

</MenuContext.Provider>

)

}

}

You Have Two Choices

Handle mutation yourself 🤡 Let React do it 😎

You should let React do it.