search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.55k stars 26.8k forks source link

Use memo: true flag with SVGR #9422

Open vihanb opened 4 years ago

vihanb commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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