Problems with previous React Context API

I will discuss the problems about context API of react version less than 16.3 .

Let’s checkout a simple app which displays date and time.

Here, we have the following components.

• App
• DateTimeDisplay
• MyClock

App.jsx

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <div id="app">
        <MyClock />
     </div>
    )
  }
}

App component contain MyClock component.

MyClock.jsx

class MyClock extends React.Component {
  constructor() {
    super();
    this.state = {
      date: new Date()
    };
    this.dateUpdater = this.dateUpdater.bind(this);
  }
  
  dateUpdater() {
   this.setState({date: new Date()});
  }
  
  componentDidMount() {
    setInterval(()=> this.dateUpdater(), 1000);
  }
render() {
   const { date } = this.state;
    return (
      <div className="center">
        <DateTimeDisplay date={date}/>
     </div>
      )
  }
};

In this component, we store date in the state. We are calling componentDidMount life cycle method, where it updates the state every second. Then we pass that state to DateTimeDisplay component as a props.

DateTimeDisplay.jsx

class DateTimeDisplay extends React.Component {
  render() {
    const { date } = this.props;
    return(
       <div>
          <p>Today: {date.toDateString()}</p><span>{date.toLocaleTimeString()}</span>
       </div>
    )
  }
};

This component takes date from the props and displays it to the user. We can use functional component for this.

How to do it using context?

Now we are going to use context to hold the date object. For this we need to add getChildContext() method my MyClock component.

static childContextTypes = {
    date: PropTypes.object
 };
getChildContext() {
    return {date: this.state.date};
  }

MyClock.jsx will look like

class MyClock extends React.Component {
  constructor() {
    super();
    this.state = {
      date: new Date()
    };
    this.dateUpdater = this.dateUpdater.bind(this);
  }
  
  static childContextTypes = {
    date: PropTypes.object
 };
  
  dateUpdater() {
   this.setState({date: new Date()});
  }
  
  componentDidMount() {
    setInterval(()=> this.dateUpdater(), 1000);
  }
  
  getChildContext() {
    return {date: this.state.date};
  }
    
  render() {
    return (
      <div className="center">
        <DateTimeDisplay />
     </div>
      )
  }
};

Then DateTimeDisplay component needs to read date from context.

DateTimeDisplay.jsx

class DateTimeDisplay extends React.Component {
 static contextTypes = {
    date: PropTypes.object
 };
render() {
    const { date } = this.context;
    return(
       <div>
          <p>Today: {date.toDateString()}</p><span>{date.toLocaleTimeString()}</span>
       </div>
    )
  }
};

We can see here, our application is running fine with context.

Then what is the problem in using the context API?

If you have seen the old reactjs context API docs(now it is updated),

Old docs about context API

It was mentioned that “powerful context API”. Then see the very next paragraph.

Old docs about context API

“Why Not To Use Context” whatttt!!! Was it really powerful ?????

It was mentioned in every paragraph “don’t use context”. Okay ! Let’s check, why “don’t use context” is mentioned many times.

You must have read about how to increasing performance in react applications. There are many ways to increase the performance. You might have gone through PureComponent.

React Top-Level API - React

Pure components can stop wasted re-rendering. So it is more useful when we talk about the react app performance. Let’s use it in our application. I am using it in DateTimeDisplay component.

DateTimeDisplay.jsx

class DateTimeDisplay extends React.PureComponent {
 static contextTypes = {
    date: PropTypes.object
 };
render() {
    const { date } = this.context;
    return(
       <div>
          <p>Today: {date.toDateString()}</p><span>{date.toLocaleTimeString()}</span>
       </div>
    )
  }
};

Now lets check the application.

Oppssss….!!!!! It is not updating the time now!!!!!!!!!

To run our application successfully either we have to remove PureComponent or context in this case.

Conclusion

Now react 16.3 has come up with a really powerful context API. We will know about it’s real power after people start using it.

I will come up with my next article where we will see how to use React new Context API and how it able to avoid above problem.