CODEWITHSUNDEEP
reactjsreact-native
Badashi
Badashi

Reputation: 1170

React-Native performance with small components

Quick question,

In order to organize my project, I have a few LinearGradient components defined similarly to this:

export class YellowGradient extends React.Component{
    render() {
        return <LinearGradient id="yellow-gradient" x1="200" y1="0" x2="200" y2="400">
            <Stop offset="0" stopColor="#f4eb42" />
            <Stop offset="1" stopColor="#e0db7d" />
        </LinearGradient>
    }
}

This enables me to reuse similar colors across the system on SVG components(ie. I just need to add a <YellowGradient> to the definitions of a SVG component when I want this yellow gradient), however I'm worried that nesting components like this might add too much overhead into the app.

Am I right to be worried, or do small constant components like these get optimized away? Is there a better pattern to follow in order to reuse small components like these?

Thanks in advance

Upvotes: 0

Views: 79

Answers (1)

Andrew I.
Andrew I.

Reputation: 252

The only way to know is to test it. If you do however run into any optimization issues, I recommend using React.PureComponent. This will increase your application speed and stop those rerenders which slows down the app.

Upvotes: 3

Related Questions