Use memo: true flag with SVGR
Created by: 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.