Use memo: true flag with SVGR

[vihanb]

Is your proposal related to a problem?

My situation is, I have components that pass an SVG icon to another component, because the SVG instance always changes, I have a lot of unnecessary re-renders (e.g. <MyBigComponent icon={<MySvg />} />.

Describe the solution you'd like

SVGR has a memo option: https://react-svgr.com/docs/options/#memo which wraps all SVG components in React.memo. This would resolve the issue above. Additionally, I can't really think how memo would break existing projects so I believe it would be a helpful addition to create-react-app.

Describe alternatives you've considered

Alternative solutions that come to mind include something like useMemo(() => <MySvg />, []) but something about that feels wrong.

[eddiemonge]

but something about that feels wrong.

But thats exactly what setting that option does. Setting that for everyone seems overkill. It adds additional processing because of the additional function and watch calls that memo uses.

[vihanb]

Surely a shallow props comparison is much less of a performance hit than the reconciler comparing the entire SVG object (especially for complex paths and illustrations).