Avoid inline style attributes
The browser often invests a lot of time rendering, when styles are implied inline. Scripting and rendering take time because the browser has to plan all the React style rules to the CSS properties. Creating a separate style.js file and importing it into the component is a faster method.
Example: Creating a separate style.js file and importing in the component instead of using inline style attribute:
Javascript
import React from "react";import styles from "./styles.css"export default class StyleExample extends React.Component { render() { return ( <> <h1> w3wiki </h1> </> ); }} |
CSS
h1{ color: green; margin: 50;} |
Output:
How to optimize the performance of React app ?
The operations involved in keeping the DOM updates are costly but react uses several techniques to minimize the no. of operations which leads to natively faster UI for many cases.
The following techniques can be used to speed up the application:
Table of Content
- Use binding functions in constructors
- Avoid inline style attributes
- Avoid extra tags by using React fragments
- Avoid inline function in the render method
- Avoid bundling all of the front end code in a single file