React shouldComponentUpdate () = false do not stop re-rendering

Question

Basically, I have this rather simple reaction component. What he does is wrap up the reaction-intercom system and display it only if the state changes. To simplify the question, I applied 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 he always rederts, which should not be.

Does anyone know why this will happen?

Answer 1

According to docs, simply returning false does not stop retransmission. Reading this will show you how to do it right.

Additional Information

Answer 2

This will not prevent the rendering of child components:
From DOCS :

Returning false does not prevent re-rendering of child components when their state changes. ...

Note that in the future, React may consider shouldComponentUpdate () as a hint rather than a strict directive, and returning false may still lead to a re-rendering of the component.

Answer 3

In the end, I realized: the problem was that the shell component was receiving state changes and unconditionally reversing all children (which is normal behavior. It's about redistributing the components (getting this Intercom shell from my <Layout> component). Thank you all for help! Greetings!