Basically, I've got this pretty simple react ponent. What it does is, is wrap around 'react-inter' and only render it if there is a change in the state. To simplify the question, I've hardwired the shouldCompoenentUpdate() method to always return false.

    import React from 'react';
    import Inter from 'react-inter';
    
    class InterWrapper extends React.Component {
        shouldComponentUpdate(nextProps, nextState) {
            // console.log(!!nextProps.user && nextProps.user.userId !== this.props.user.userId);
            // return !!nextProps.user && nextProps.user.userId !== this.props.user.userId;
            return false;
        }
    
        render() {
            console.log('rendering');
            return <Inter {...this.props} />;
        }
    };
    
    export default InterWrapper;

Basically, I've got this pretty simple react ponent. What it does is, is wrap around 'react-inter' and only render it if there is a change in the state. To simplify the question, I've hardwired the shouldCompoenentUpdate() method to always return false.

    import React from 'react';
    import Inter from 'react-inter';
    
    class InterWrapper extends React.Component {
        shouldComponentUpdate(nextProps, nextState) {
            // console.log(!!nextProps.user && nextProps.user.userId !== this.props.user.userId);
            // return !!nextProps.user && nextProps.user.userId !== this.props.user.userId;
            return false;
        }
    
        render() {
            console.log('rendering');
            return <Inter {...this.props} />;
        }
    };
    
    export default InterWrapper;

What happens is that it always rerenders, which should not happen.

Anyone has any idea why would that happen?

• javascript
• reactjs

• 2 add console.log to ponentDidMount, ponentWillUpdate and ponentDidUpdatesee which one of them firing. If the ponent is unmounting and remounting shouldComponentUpdate won't work – bennygenel Commented Sep 13, 2017 at 12:16

3 Answers 3

I figured it out eventually: The problem was that the wrapping ponent was receiving state changes, and was rerendering all children unconditionally (which is normal behaviour. It was a matter of rearranging ponents (getting this Inter wrapper out of my <Layout> ponent). Thanks all for the help! Cheers!

This wont prevent rendering of child ponents:
From the DOCS:

Returning false does not prevent child ponents from re-rendering when their state changes. ...

Note that in the future React may treat shouldComponentUpdate() as a hint rather than a strict directive, and returning false may still result in a re-rendering of the ponent.

If Inter ponent renders when InterWrapper does not (because of shouldComponentUpdate being set to false), that means that Inter ponent listens to data changes independently from {...this.props} passed from its parent (for example, it can be subscribed to a store).

I had the same problem, Child ponent was rendering when its Parent was not because of shouldComponentUpdate set to false. The reason was - Child was subscribed to store and listened to data changes independently from a parent.