create-react-app React performance with SVG as ReactComponent and eslint with React.memo missing display name about why-did-you-render

[ljosberinn]

Yes, that's correct, the function passed as 2nd argument to useMemo() is usually called areEqual, thus it semantically makes sense to not re-render if areEqual returns true.
See https://reactjs.org/docs/react-api.html#reactmemo for reference.

You can fix the eslint/display-name with

const PureProfileIcon = PureComponent(ProfileIcon);
PureProfileIcon.displayName = 'PureProfileIcon';

but that rule is purely useful during development as production will have names minified anyways so.

[vzaidman]

whats the point of

React.memo(props => <WrappedComponent {...props} />, () => true);

?
it makes it so every props, no metter what, would cause WrappedComponent to be recreated.

EDIT: i got it, it means it should never re-render because "areEqual" returns "true"

[frederikhors]

Sorry, I don't understand. I'm using React.memo to avoid re-render and the second argument is a callback which if true skip the props check.

Am I right?

[frederikhors]

I think something like shouldComponentUpdate() { return false }.

Am I right?

[vzaidman]

i got it, it means it should never re-render because "areEqual" returns "true"

[vzaidman]

for the warning:
"Re-rendered because the props object itself changed but it's values are all equal"
using React.memo should be enough:

export default WrappedComponent =>
  React.memo(props => <WrappedComponent {...props} />); // no () => true

unless you dont want the component to ever re-render. then you indeed can add () => true like you did:

export default WrappedComponent =>
  React.memo(props => <WrappedComponent {...props} />, () => true);

I wouldn't call it "PureComponent" though.

If you want a pure component, use React.memo in the first way.

If a component never re-renders, you can call it:
StaticComponent or even NeverReRender or something.

[frederikhors]

@vzaidman, @ljosberinn thanks.