How to optimize React component to render it ?

Last Updated : 22 Jul, 2024

ReactJS mainly depends upon the props (which are passed to it) and the state of the Component. Hence to reduce the number of times Component renders we can reduce the props and state it depends upon. This can be easily done by separating the logic of one component into several individual child components.

Steps to Create the React App:

Step 1: Create a fresh React Native Project by running the command

npx create-react-app demo

Step 2: Now go into your project folder i.e. language demo.

cd demo

Project Structure:

The updated dependencies in package.json file will look like.

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
  }

Approach: We have now three components named Parent.js, Child1.js, and Child2.js.We have declared a counter state in all three of them and also a Button to increase the value of count.

When the app loads for the first time all three of the components get rendered for the first time.
Now when we click in the Parent's Button the counter state of the parent component increases by 1, this results in the rendering of the Parent component as since Child1 and Child2 are rendered in the same component they both also get rendered.
Now we click the Button in Child1 which changes the counter state of the Child1 Component, but this time only the Child1 component gets rendered. That's because both the Parent and Child2 components are separate from Child1 rendering logic.
Now we click the Button in Child2 which changes the counter state of the Child2 Component, only the Child2 component gets rendered. That's because both the Parent and Child1 components are separate from Child2 rendering logic.

Example: Below is the practical implementation of the above code and write the below code in the following files:

App.js: App component calling parent component
Parent.js: Parent component calling both the child component and console parent is entered.
Child1.js: we click the Button in Child1 which changes the counter state of the Child1 Component, but this time only the Child1 component gets rendered.
Child2.js: we click the Button in Child2 which changes the counter state of the Child2 Component, only the Child2 component gets rendered.

App.js

import logo from "./logo.svg";
import "./App.css";
import React from "react";
import Parent from './screens/parent';

function App() {

    return (
        <div className="App">
            <Parent />
        </div>
    );
}

export default App;

JavaScript

//Parent.js
import React, { Component } from "react";
import Child1 from "./Child1";
import Child2 from "./Child2";
export class parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            countInParent: 0,
        };
    }
    render() {
        console.log("Parent is rendered");
        return (
            <div>
                <h1>Count In Parent {this.state.countInParent}</h1>
                <button
                    type="button"
                    className="btn btn-primary btn-lg"
                    onClick={() => this.setState({
                        countInParent: this.state.countInParent + 1
                    })}
                >
                    button in Parent
                </button>
                <Child1 />
                <Child2 />
            </div>
        );
    }
}

export default parent;

JavaScript

//Child1.js
import React, { Component } from "react";

export class child1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            countInChildOne: 0,
        };
    }
    render() {
        console.log("Child 1 is rendered");
        return (
            <div>
                <h1>Count In Child One {this.state.countInChildOne}</h1>
                <button
                    type="button"
                    className="btn btn-primary btn-lg"
                    onClick={() =>
                        this.setState({
                            countInChildOne: this.state.countInChildOne + 1
                        })
                    }
                >
                    Button in Child One
                </button>
            </div>
        );
    }
}

export default child1;

JavaScript

//Child2.js
import React, { Component } from "react";

export class child2 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            countInChildTwo: 0,
        };
    }
    render() {
        console.log("Child 2 is rendered");
        return (
            <div>
                <h1>Count In Child Two {this.state.countInChildTwo}</h1>
                <button
                    type="button"
                    className="btn btn-primary btn-lg"
                    onClick={() =>
                        this.setState({ 
                            countInChildTwo: this.state.countInChildTwo + 1 
                        })
                    }
                >
                    Button In Child Two
                </button>
            </div>
        );
    }
}

export default child2;

Step to run the app:

npm start

Output:

How to conditionally render components in ReactJS ?

rahulschauhan50

Improve

Article Tags :

How to optimize React component to render it ?

Steps to Create the React App:

Similar Reads

Thank You!

What kind of Experience do you want to share?