CAn you explaine how this works?

Hello,
The question is about this exercise : this

import React from 'react';
import ReactDOM from 'react-dom';

const GUINEAPATHS = [
  'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-1.jpg',
  'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-2.jpg',
  'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-3.jpg',
  'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-4.jpg'
];

export class GuineaPigs extends React.Component {
  constructor(props) {
    super(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, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    let src = GUINEAPATHS[this.state.currentGP];
    return (
      <div>
        <h1>Cute Guinea Pigs</h1>
        <img src={src} />
      </div>
    );
  }
}

ReactDOM.render(
  <GuineaPigs />, 
  document.getElementById('app')
);

I figured out how nextGp() works . it setState everytime method runs to setState new index of 
GUINEAPATHS and setState automatic render call start and page change

But how we call nextGP() automatic ? what is usage of
 componentDidMount() {
    this.interval = setInterval(this.nextGP, 1000);
  }

If I delete 
componentWillUnmount() {
    clearInterval(this.interval);
  }

It still fuctions correctly .

I’m on my phone so can’t see the whole exercise but:

  1. componentwillUnmount is only called when the component isn’t needed anymore, it is for cleaning up anything that depends on the component and without it there won’t work properly anymore. So cancelling network requests, timers etc. In your case it is clearing the interval timing event with clear interval, otherwise it would try call the nextGP method on a component that doesn’t exist.

  2. componentDidMount is called after the component is made but not shown on the screen. This and componentWillUnmount are called lifecycle methods and are called by React automatically at given points of the lifecycle (which is indicated by the method name).

  3. nextGp is called every second. setInterval is a method that will run the first argument (this.nextGp) every X period of time in milliseconds (1000 ms or 1 second in this case).

Point 1 should really have been after 2 and 3, sorry.

2 Likes

why we Did not used () when calling nextGp inside setInterval ?

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

Because you need to give it the method itself so it can be called when needed. If you put () after nextGP, it would call the method once and the result of that method would be passed into setInterval. Because nextGP doesn’t explicitly return anything undefined will be returned, obviously, if you pass undefined in then it can’t do anything with that.

2 Likes