create-react-app React performance with SVG as ReactComponent and eslint with React.memo missing display name

I’m using this component in a create-react-app app:

import { ReactComponent as ProfileIcon } from "./icons/profile.svg";

...
render(){
  <ProfileIcon {...props}/>
}

Using also why-did-you-render (https://github.com/welldone-software/why-did-you-render) I got this warning:

SvgProfileIcon
whyDidYouRender.min.js:1191 {SvgProfileIcon: ƒ} "Re-rendered because the props object itself changed but it's values are all equal." "This could of been avoided by making the component pure, or by preventing it's father from re-rendering." "more info at http://bit.ly/wdyr02"
whyDidYouRender.min.js:1191 prev props: {svgRef: null, className: "icon", height: "24", width: "24"} !== {svgRef: null, className: "icon", height: "24", width: "24"} :next props

So I made a custom PureComponent like this:

import React from "react";

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

FIRST QUESTION: Is this performances-correct?

I’m using it like this:

import { ReactComponent as ProfileIcon } from "./icons/profile.svg";

import PureComponent from "./PureComponent";

const PureProfileIcon = PureComponent(ProfileIcon);

...
render(){
  <PureProfileIcon {...props}/>
}

SECOND QUESTION: Can I avoid this component at all using React.memo (or something else) differently?

Now eslint is complaining about:

Component definition is missing display name eslint(react/display-name)

THIRD QUESTION: How can I fix this?

[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.

[frederikhors]

@vzaidman, @ljosberinn thanks.