An alternative solution for changing ReactJS style dynamically

Introduction

With the increased usage of ReactJS, it’s important to know advanced features and what all can be done for increased performance. Here, in this guide, you’ll learn the procedure of how ReactJS styles can be changed dynamically.

In React, you tend to define styles in the manner similar to the code that is shown after this paragraph. You are required to define your CSS styles or styles as a component in the same file as a constant.

import React, { Component } from "react";
class StaticTitle extends Component {
    render() {
        const { title } = this.props;
        return <span style = {styles.title}> {title} </span>;
    }
}

const styles = {
    title: {
        fontSize: 48,
    }
}

A close-up view clearly shows that the size of the title component remains unchanged since the styles are hard-coded.

Now, if you want the title component to have a unique font size that is dependent on a size prop, then it will be more difficult. This is because the probability of the size prop diminishes when the hard-coded styles constant are taken in use. Also, since it doesn’t lie within the component class which has completely no access to the prop size, it would not be possible to get a font size as per your requirement.

Now the question arises, how to work on the changes relating to styles?

Different ways to make your style dynamically ,

First Method :

It is the case of Inline Styles, let’s have a look below:

import React, { Component } from "react";
class StaticTitle extends Component {
    render() {
        const { title, size } = this.props;
        return <span style = {{ fontSize: size }}> {title} </span>;
    }
}

The above function works best when there are limited inline styles available. However, unfortunately, the same doesn’t work well when there are numerous inline styles available. In that scenario, you need to consolidate all your styles into a single object.

Second Method :

When the render function contains the styles object: In case you will find the styles object in the render function, then the following code is applicable:

import React, { Component } from "react";
class StaticTitle extends Component {
    render() {
        const { title, size } = this.props;
        const styles = {
            container: {
                fontSize: size
            }
        };
        return <span style = {styles.container}> {title} </span>;
    }
}

The above function works well when you wish to make use of Stylesheet.create of Aphrodite or the React Native’s sheet to create the styles object.

Worried about the output?

You may get worried about the output and that is actually justifiable. If you are actually tensed on the performance, then you are not at all required to worry. It is so because, if on each render, you want to create a new styles object, then the below solution could be of immense help for you. However, you need to keep in mind that the chances of using the next method are quite rare.

Third Method :

In case you are not satisfied with the performance, you should re-render only when you could find a change in the size prop.

The Lifecycle method, known as the shouldComponentUpdate, is provided by React to help components determine whether to go for attempting the component’s re-render or not. In case the Lifecycle method returns true (true is returned by default in the situation when you fail to define the shouldComponentUpdate function), under such a situation whenever the parent re-renders, it also re-renders.

The benefit of shouldComponentUpdate can be taken in order to do a short-circuit in the overall process of rendering by returning false, on the condition neither the state, nor component props have changed. It is depicted as under:

import React, { Component } from "react";
class StaticTitle extends Component {
    shouldComponentUpdate(nextProps, nextState) {
        if (
            /* Caution: You need to keep a watch here that the nextState is
               intensely equivalent to this.state as well as the  
               nextProps is intensely equivalent to
               this.props, failing which you may get into a bug where else you might
               run into a bug where you are rendering the short-circuits, though they
			   should actually not come */
        ) {
            return false;
        }
        return true;
   }
    render() {
        const { title, size } = this.props;
        const styles = {
            container: {
                fontSize: size
            }
        };
        return <span style = {styles.container}> {title} </span>;
    }
}

If you are going to adopt the above procedure, the resultant would be allowing the code to hamper or short-circuit the overall process of rendering, when the requirement is felt by the component.

Precaution: Points you need to keep in mind

Although you may go for the above-mentioned procedure, however, you need to be cautious. You need to make sure while using the Lifecycle Method shouldComponentUpdate, that you are intensely making a comparison of nextProps to this.state and nextStatesto this.state, failing which you may end up getting an error message or a bug where you are rendering the short-circuits, though they should actually not come. This point is very important and you must make a note of it or else it would result in wasting your time and efforts.

With almost all the optimizations, the universal principle is that the last method should only be made use of when there are no alternatives. Here, the case is also the same. You should go for the last method only when you are finding any kind of performance issue. The first and the second methods are undoubtedly the best ones to suit your requirements as the last method can be seen as an opportunity to attract bugs, which you would not like to do.

Conclusion

In this guide, you have learned about how to change ReactJS styles dynamically. We elaborated three methods with examples. The first and second method does the work of changing ReactJS styles dynamically. The escape hatch is provided in the third method; in case you witness any kind of performance issues in the React or in the native components of React with dynamic styles.