CODEWITHSUNDEEP
reactjs
merlindru
merlindru

Reputation: 149

When to use a Component Instance instead of a Component?

Is there any difference, apart from the function (that makes the component) being called again, between rendering a Component and a Component Instance?

Consider this snippet:

// component.jsx
function Foo() { return <div/> }
function Bar() { return <div><Foo /></div> }

// component-instance.jsx
const icon = <Foo />

function Foo() { return <div/> }
function Bar() { return <div>{fooInstance}</div> }

I'm thinking there might be a performance difference between the two, especially if Bar gets rendered (called) often.

Upvotes: 0

Views: 140

Answers (1)

Bernardo Ferreira Bastos Braga
Bernardo Ferreira Bastos Braga

Reputation: 1685

First of all, what you're calling a component instance is usually called a React Element.

The only downside of using Elements instead of Components is that you won't be able to update its props.

The performance gain from not calling a function to generate the element is neglible, you shouldn't really bother trying to optimize here.

Upvotes: 2

Related Questions