Documentation: what to do when "different React elements with the same displayName." about why-did-you-render HOT 13 CLOSED

this is a component:

function MyComponent(){
  
}

this is a react element:

const element = <MyComponent/>

and it is equivalent to

const element = React.createElement(MyComponent, {})

you probably pass <SomeComponent/> to a component that you expect wont re-render.
and it creates a new element each time, right?

from why-did-you-render.

exactly

from why-did-you-render.

so your component will re-render every time even if it's pure because
<SomeComponent/> !== <SomeComponent/>
an this is always true.

what you can do is to wrap the both of the components in a pure component

class TwoComponents extends React.PureComponent{
  render() {
     return (
        <ComponentA b={<ComponentB/>}/>     
      )
  }
}

and then both of them will only re-render if the props of TwoComponents changes

from why-did-you-render.

I already have all components extending PureComponent, that is why I don't understand why is this happening, also I have not implemented shouldComponentUpdate or anything like that.

interface Props {
    className ?: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
}

export default class Li extends React.PureComponent<Props> {

    render(): React.ReactNode {
        return (
            <li
                className={this.extendClassName()}
                children={this.props.children}
                style={this.props.style}
            />
        );
    }
}

This an example of a component that I have, that always re-rendering

from why-did-you-render.

what is passed to Li?
What's re-rendered all the time?

from why-did-you-render.

    <ul>
      <Li className="a-class">
        <img src="logo.png" />
      </Li>
    </ul>

If had some custom element inside I would undertand why it is re-rendering, but I have an image, and on other Li only have plain text

from why-did-you-render.

Ok. so <img/> is a new react-element on every render.
This is why Li cant be pure.

if you add shouldComponentUpdate you will see this.props.children !== nextProps.children

from why-did-you-render.

yes this.props.children !== nextProps.childrenalways returns true.

then, if a component of my mine has children, then, do they must be a Component instead PureComponent?

from why-did-you-render.

yes. their children is always new so they will always re-render even if they are pure.

from why-did-you-render.

I'll add it to the guide

from why-did-you-render.

thank you.

I will have to organize better my components, to prevent unnecesary re-renderings

from why-did-you-render.

This library was design to catch these types of errors so I'm happy it helped you :)

from why-did-you-render.

updated http://bit.ly/wdyr02

from why-did-you-render.