Closed Geist5000 closed 2 years ago
@Geist5000 since this component is a functional component, could you use something like pure
from https://github.com/acdlite/recompose?
React does provide a function just like pure from recompose. It is called memo as descriped here: https://reactjs.org/docs/react-api.html#reactmemo. I used it in my project and it works like a charm, it looks like this:
import {memo} from "react";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
const fae = memo(FontAwesomeIcon);
export default fae;
If you want to implement it within this Project I would recommend passing a custom compare method to prevent the Icon not updating when fields of a passed objects change.
If you want to add this feature to this project I would offer to make this change.
@Geist5000 I'd be in favor of documenting this on the "Dig Deeper" section of our site: https://fontawesome.com/docs/web/use-with/react/dig-deeper
But I'm not in favor of forcing everyone to use this by changing the main component.
How does that sound?
sounds good to me
Is your feature request related to a problem? Please describe. Performance
Describe the solution you'd like FontAwesomeIcon as Pure Component
Describe alternatives you've considered Every project does wrap the FontAwesomeIcon into a Pure Component by themselfs.
Additional context I realised while studying the React Profiler that the FontAwesomeIcons rerender everytime the parent component is rerendered, even though the icon itself doesn't change. The Icon itself needs a milisecond to render, which I feel like is very long.
To my knowlege there isn't any usecase where the props and state stay the same but the icon needs a rerender.