Trying to understand the flow of React

Someone ask me to help on a Raisely.com project / webpage. Because of that I need to do my first component in React. I did a simple component to check the flow of this React thing :O)

(RaiselyComponents) => class MyFirstComponent extends React.Component {  

    componentDidMount() {
        const currentData = this.props.global.current;
        console.log('didMount');    
        if(currentData.profile) {
          console.log('uuid = ' + currentData.profile.uuid);
        }
    }

    componentDidUpdate() {
        const currentData = this.props.global.current;
        console.log('didUpdate');
        if(currentData.profile) {
          console.log('uuid = ' + currentData.profile.uuid);
        }      
    }
 
    render() {        
        console.log('Render');            
        return 'Trying to understand.';         
    }
}

I put this component on a profile page… when I navigate to a profile, clear the logs and go to another one.

The screen shot is what I have in the logs on the second profile page I visit (the logs was clear before)

My first question is

Is this normal with React to see 5 renders and 4 didUpdate in the logs?

Also the weird thing (why I’m here) is why the UUID are not the same, the first 2 are from the previous profile page the correct one are the last 3..

And my last question if everything is normal HOW do I get the correct UUID if the one in the didMount is not the correct one… The correct one are only printed in the didUpdate on the second time.

A side question… If we really have 5 renders, if you display a image did the image load 5 times… Because when I go from page to page I saw thing flashing (old data changing for the new one)

So weird to me this new React.

I also send this question to the Raisely support teams, don’t know if they check it but the answer was everything is normal and I need to learn more React to make thing work perfectly.

Thanks for your help

Answer

Based on your question, let me assume that the prop passed to this component has been changed multiple times, specifically this.props.global.current with profile.uuid property.

1. Is this normal with React to see 5 renders and 4 didUpdate in the logs?

• Yes, on first render the component is initialized so no update, then the props change 4 times later, hence 4 updates and the render function is called 4 times as well.

2. Also the weird thing (why I’m here) is why the UUID are not the same, the first 2 are from the previous profile page the correct one are the last 3..

• Have to look at the code to give a full answer, either the props were changed or there are muliple MyFirstComponent(s) with different props passed down.

3. And my last question if everything is normal HOW do I get the correct UUID if the one in the didMount is not the correct one… The correct one are only printed in the didUpdate on the second time.

• I need to see the full logic of the app.

4. A side question… If we really have 5 renders, if you display a image did the image load 5 times… Because when I go from page to page I saw thing flashing (old data changing for the new one)

• Yes, whenever a React component re-renders, the render function which returns the image will re-run, so the image also gets reloaded.