MENU


Preventing Unintentional Renders

The code below will re-render all consumers every time the Provider re-renders because a new object is always created for 'value':


RESETRUNFULL
class App extends React.Component {
   render() {
      return (<MyContext.Provider value={{something: 'something'}}>
                    <Toolbar />
                 </MyContext.Provider>);
   }}

To get around this, lift the value into the parent's state:


RESETRUNFULL
class App extends React.Component {
   constructor(props) {
      super(props);
        this.state = {
        value: {something: 'something'},
      };
   }
   render() {
      return (<MyContext.Provider value={this.state.value}>
                    <Toolbar />
                 </MyContext.Provider>);
   }}