How does the second pic is being displayed?


#1

How does the second pic is being displayed? the render() method will be executed for once and it displays the first pic. Later how does the displaying go through the array?

https://www.codecademy.com/courses/react-102/lessons/container-presentational-components/exercises/container-presentational-components-apply?action=lesson_resume


#2

you use setInterval:

// GuineaPigsContainer.js
componentDidMount() {
    this.interval = setInterval(this.nextGP, 5000);
  }

setInterval is a javascript function:

which sets an interval, after the time of the interval is expired, the nextGp property:

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

gets called, given you designed this property/method in such it a way, it will change the state, this is reflected by the picture changening


#3

Thankya so much for the reply, it really helped me ! But I still have some doubt.

  1. So because of the setInterval() , the nextGP() will be called and this will change the state and so the second pic will be set as the currentGP. But for this to displayed, doesnt it need to call the render() method? how will the render() method will be called again?

  2. componentWillUnmount() : When will this method be called? is it after displaying all the 4 images?
    And, when the task of displaying of all the 4 images is done, how will the control goes back to the first pic again?


#4

if we look at the docs:

we read:

setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state

so setState is handling the re-rendering.

also in the docs:

willUmount is called when the element gets removed from the DOM, which doesn’t seem to be the case. However, having willUmount is a very good idea to clear an interval when the element get removed from the page

this line:

let next = ++current % GUINEAPATHS.length;

is responsible for that. If you learned the basics of JavaScript, you should understand that when the index exceed the array, the modulo operator will cause next to become 0 (first index of array)


#5

What does mounting/unmounting mean exactly?

And, as all the 4 pics are being displayed continuously, why do we need to call the clearInterval() method?


#6

Mounting and unmounting are very fundamental principals of ReactJS, surely they must have been taught? Its also in the documentation i provided earlier:

These methods are called when an instance of a component is being created and inserted into the DOM

Unmounting
This method is called when a component is being removed from the DOM

its all in the documentation i provided. Learning to read documentation is very important

well, if we ever want to unmount the pictures, we need to ensure the interval is cleared, so by already adding this method, we code defensively making the code more maintainable and less prone to bugs and changes.

currently, the unmount doesn’t occur, so clearInterval() actually never gets called/executed


#7

Hi ! Thanks for the quick reply.

I have gone through the docs earlier, but i didnt understood that mounting/un mounting means inserting/ removing a component from DOM tree structure. Now i got it .


#8

Its in the docs :wink:

so all clear now? No more questions?


#9

:+1:. No more questions


#10

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