Bad practise to generate new StyleSheet every render?

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!

dakoto · Answer 1 · 2018-04-24T16:47:03.900

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.

Right! But then if I could just use Array notations, why not use a regular object as root style as well? Like, what's the point of using StyleSheet at all? — Nordling Art, Apr 24 '18 at 20:05
You could, but for performance reasons, it’s not recommended. According to the docs: “Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time. It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet).” — dakoto, Apr 25 '18 at 06:17
But then it wouldn't be recommended to use array notations either because that would constantly create new object references? So if neither is recommended due to performance, what would be the ideal way of dynamic styling? — Nordling Art, Apr 25 '18 at 19:19

Bad practise to generate new StyleSheet every render?

1 Answers1