Memo propsAreEqual is good practice to use?

First of all, really useful, nice library! Already helped a lot to optimize components.

There is one warning I’m having trouble with: Re-rendered because of prop changes

I’m getting this in a component which gets props injected by another component that I have no control over (managed by an npm library “react-color”). Some of these props are eg. an rgb object, which is a simple object containing “r”, “g”, “b” keys and even the value is the same, the object itself seems to be recreated by the component that injects these values.

I tried to fix this by adding a second parameter to my memo call:

const MyComponent = memo(props => {
  return (<div>...<div>)
}, (prevProps, nextProps) => {
// deep compare prevProps, nextProps
})

This seems to remove the warning from “why-did-you-render” but I want to confirm if this is a good solution in this case? Thank you

[andrewvarga]

Ah. So what I did previously was this:

CustomPicker(memo(props => {
   ... impl
}))

your suggestion would be:

memo(CustomPicker(props => {
   ... impl
}))

meaning if the props don’t change CustomPicker will not even get a chance to inject its own calculated props…sounds reasonable! I give it a quick test, the component doesn’t update for some reason in certain cases, but might be a bug I haven’t found yet. Thanks!

[vzaidman]

i mean

const ColorPicker = memo(CustomPicker(props => {
   ... component implementation
}))
ColorPicker .whyDidYouRender = false
export default ColorPicker