Open In App

How to optimize React component to render it ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:

Project Structure

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.

  1. When the app loads for the first time all three of the components get rendered for the first time.
  2. 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.
  3. 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.
  4. 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:



Last Updated : 22 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads