Bad practise to generate new StyleSheet every render? - reactjs

Question

Every documentation example that I have read about creating a StyleSheet for a component has done it outside of render() (even like a regular variable outside the component class). Doing it that way means I have no control over props or state changes that can manipulate the style of said component. As such I have been calling a getStyles() function inside the render() method which creates a (new) StyleSheet on every render. To me it sounds expensive performance-wise, but it does the job. However, I’m wondering if there is a better way of doing it?
Thanks in advance!

Answer 1

Yes! Accourding to the StyleSheet Docs it is not the best idea to create a StyleSheet during every render because of performance and code-readability.
There is a better way of doing it by using array notations, basically meaning you can pass in an array of style objects
for instance if I had a component that has it's background color and text color set in a styles object like this:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class SomeComponent extends Component{
render(){
return(
<View style={styles.root}>
<Text>{'Hi Everybody!'}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
root: {
backgroundColor: '#000000',
height: 400,
width: 300,
color: 'white'
}
});
You can customize it the background color(or any other style) like so:
<View style={[styles.root, {backgroundColor: "yellow"}]}>
<Text>{'Hi Everybody!'}</Text>
</View>
In your case, you might pass in a props value like so :
<View style={[styles.root, this.props.style]}>
<Text>{'Hi Everybody!'}</Text>
</View>
or a variable from the state object like so :
<View style={[styles.root, this.state.style]}>
<Text>{'Hi Everybody!'}</Text>
</View>
The later values in the array will take precedence, so if I added yet another style object that has a backgroundColor attribute, the last backgroundColor will be applied;
For example if I did this:
<View style={[styles.root, {backgroundColor: "yellow"}, {backgroundColor: "green"}]}>
<Text>{'Hi Everybody!'}</Text>
</View>
the background color will be green.
So you can now write your code in such a way that the styles created with StyleSheet.create({}) will contain the boilerplate styles that are constant and apply to any customization, or just the default styles.
Hope that helps.