Make FontawesomeIcon Component a Pure Component

[Geist5000]

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.

[robmadole]

@Geist5000 since this component is a functional component, could you use something like pure from https://github.com/acdlite/recompose?

[Geist5000]

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.

[Geist5000]

If you want to add this feature to this project I would offer to make this change.

[robmadole]

@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?

[Geist5000]

sounds good to me