Separate Container Components From Presentational Components: Apply


I dont understand how the following code is getting called and how it works ! ?
What is interval doing here and what do these below methods do ?
how are they invoked here in this code ?

componentDidMount() {
    this.interval = setInterval(this.nextGP, 5000);

  componentWillUnmount() {


Lifecycle methods are methods that get called at certain moments in a component’s life.

There are three categories of lifecycle methods: mounting, updating, and unmounting

There are three mounting lifecycle methods


When a component mounts:

  <element />,

it automatically calls these three methods, in order

ReactJS is handling this methods call when you mount a component, you can use this to your advantage when designing your app.

Impossible to say what exactly interval is without knowing where the example is coming from

componentDidMount is called when a component is rendered for the first time, so this is a good place to start an interval (to start an update cycle to update the element every 5 seconds)

then when the component is removed, componentWillUnmount is called, you clear the interval


The code comes from this example. :

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import {GuineaPigs} from ‘…/components/GuineaPigs’;

const GUINEAPATHS = [’,’,

class GuineaPigsContainer extends React.Component {
constructor(props) {

this.state = { currentGP: 0 };

this.interval = null;

this.nextGP = this.nextGP.bind(this);


nextGP() {
let current = this.state.currentGP;
let next = ++current % GUINEAPATHS.length;
this.setState({ currentGP: next });

componentDidMount() {
this.interval = setInterval(this.nextGP, 5000);

componentWillUnmount() {

render() {
let src = GUINEAPATHS[this.state.currentGP];
return ;

<GuineaPigsContainer />,


do you still have questions left after my explanation? The interval in this case, is to display a new picture every 5 seconds


Thank you for the detailed explanation of components lifecycle methods.


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.