React shouldComponentUpdate() = false not stopping re-render

Question

Basically, I've got this pretty simple react component. What it does is, is wrap around 'react-intercom' 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 Intercom from 'react-intercom';
    
    class IntercomWrapper 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 <Intercom {...this.props} />;
        }
    };
    
    export default IntercomWrapper;

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

Anyone has any idea why would that happen?

Answer 1

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

Answer 2

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

Returning false does not prevent child components 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 component.