Arrow function vs Component React

Question

I recently made a pull request at my company and got feedback on some code that I had written and I wanted some other opinions on this. We have an component called Icon that can take another component as a prop like so:

<Icon component={ArrowDown}/>

this simply renders the following:

<IconContainer>
    <ArrowDown/>
</IconContainer>

Now you can also do the follow if you need to create a custom icon:

<Icon component={()=><div>custom Icon</div>}/>

The reviewer commented that the function ()=><div>custom Icon</div> should be removed outside the scope for performance reasons to prevent re-rendering:

const CustomIcon = ()=><div>custom Icon</div>
const someComponent = ()=><Icon component={customIcon}/>

I'm not convinced that this will improve performance (code-readability sure) but wanted to get some other opinions on it. Thanks!

I believe the component prop is re-created on every render, which causes the Ìcon to re-render. But I'm not sure that would affect the performance. Because simply it is a small component and not a layout with so many nested divs. — Medi
– Medi, Commented Jun 10, 2021 at 9:44

user16135923 · Accepted Answer · 2021-06-10 09:45:28Z

4

Arrow functions are anonymous and will be re-instantiated on every render.

If you create a named component, it will have a reference and will not be re-rendered by React unless and until required (through state update).

And also, as you mentioned, it provides better readability and an option for code splitting.

answered Jun 10, 2021 at 9:45

user16135923

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Arrow function vs Component React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related