- ReactJS Tutorial
- ReactJS - Home
- ReactJS - Introduction
- ReactJS - Installation
- ReactJS - Features
- ReactJS - Advantages & Disadvantages
- ReactJS - Architecture
- ReactJS - Creating a React Application
- ReactJS - JSX
- ReactJS - Components
- ReactJS - Nested Components
- ReactJS - Using Newly Created Components
- ReactJS - Component Collection
- ReactJS - Styling
- ReactJS - Properties (props)
- ReactJS - Creating Components using Properties
- ReactJS - props Validation
- ReactJS - Constructor
- ReactJS - Component Life Cycle
- ReactJS - Event management
- ReactJS - Creating an Event−Aware Component
- ReactJS - Introduce Events in Expense Manager APP
- ReactJS - State Management
- ReactJS - State Management API
- ReactJS - Stateless Component
- ReactJS - State Management Using React Hooks
- ReactJS - Component Life Cycle Using React Hooks
- ReactJS - Layout Component
- ReactJS - Pagination
- ReactJS - Material UI
- ReactJS - Http client programming
- ReactJS - Form Programming
- ReactJS - Controlled Component
- ReactJS - Uncontrolled Component
- ReactJS - Formik
- ReactJS - Conditional Rendering
- ReactJS - Lists
- ReactJS - Keys
- ReactJS - Routing
- ReactJS - Redux
- ReactJS - Animation
- ReactJS - Bootstrap
- ReactJS - Map
- ReactJS - Table
- ReactJS - Managing State Using Flux
- ReactJS - Testing
- ReactJS - CLI Commands
- ReactJS - Building and Deployment
- ReactJS - Example
- Hooks
- ReactJS - Introduction to Hooks
- ReactJS - Using useState
- ReactJS - Using useEffect
- ReactJS - Using useContext
- ReactJS - Using useRef
- ReactJS - Using useReducer
- ReactJS - Using useCallback
- ReactJS - Using useMemo
- ReactJS - Custom Hooks
- ReactJS Advanced
- ReactJS - Accessibility
- ReactJS - Code Splitting
- ReactJS - Context
- ReactJS - Error Boundaries
- ReactJS - Forwarding Refs
- ReactJS - Fragments
- ReactJS - Higher Order Components
- ReactJS - Integrating With Other Libraries
- ReactJS - Optimizing Performance
- ReactJS - Profiler API
- ReactJS - Portals
- ReactJS - React Without ES6 ECMAScript
- ReactJS - React Without JSX
- ReactJS - Reconciliation
- ReactJS - Refs and the DOM
- ReactJS - Render Props
- ReactJS - Static Type Checking
- ReactJS - Strict Mode
- ReactJS - Web Components
- Additional Concepts
- ReactJS - Date Picker
- ReactJS - Helmet
- ReactJS - Inline Style
- ReactJS - PropTypes
- ReactJS - BrowserRouter
- ReactJS - DOM
- ReactJS - Carousel
- ReactJS - Icons
- ReactJS - Form Components
- ReactJS - Reference API
- ReactJS Useful Resources
- ReactJS - Quick Guide
- ReactJS - Useful Resources
- ReactJS - Discussion
ReactJS - PureComponent Class
As we know React is a very popular JS library for creating interactive user interfaces. And it is purely based on components. So there is a type of component present in the React which is known as PureComponent. It is very similar to the Component, however it avoids re-renders for the same props and state.
Syntax
class MyComponent extends PureComponent { render() { return <h1>Hiii, {this.props.name}!</h1>; } }
We can see in the above code sample. We have extended PureComponent in place of Component. We usually extend Components. So for avoiding re-rendering a class component for the same props and state we can extend PureComponent.
PureComponent in React is just an enhanced version of the regular Component. It is able to perform all of the functionality of a Component. The main advantage of PureComponents is that it checks to verify if the props and state have changed before re-rendering.
The PureComponent is similar to a custom "shouldComponentUpdate" method. The role of shouldComponentUpdate method is determining whether or not the component should be updated. But PureComponent does this check automatically, focusing just on changes in the data, which can help our app function more effectively.
How to use it?
When a component's parent component changes in React, the child component usually gets updated or re-rendered. This happens even when the new data transmitted to the child is the same as the old data.
However, React provides an optimization to avoid inefficient re-rendering. We can create a component that will not re-render when its parent changes, as long as the new props and state it receives is equal to the old data we had.
If we are using class components in React, we can enable this optimization by making our component extend a class called "PureComponent." This tells React to only re-render the component when the data it receives has actually changed.
Examples
Example − Counter App
In this, we will create a simple counter application using a PureComponent to show how it optimizes rendering −
So, we will have a Counter component that extends PureComponent.
We will display the current count value in the MyApp component.
The counter will increase each time we click the "Increment" button, and the counter component will not update until the count prop has changed.
This code explains how PureComponent checks to see if the prop values have changed before re-rendering in order to optimize rendering.
import React, { PureComponent, useState } from 'react'; class Counter extends PureComponent { render() { console.log("Counter was rendered at", new Date().toLocaleTimeString()); return <div>Count: {this.props.count}</div>; } } export default function MyApp() { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); }; return ( <> <button onClick={increment}>Increment</button> <Counter count={count} /> </> ); }
Output
Example − List Component
Let us create another React app using PureComponent. In this example, we will have a ListComponent that renders a list of items using PureComponent. We have a ListComponent that maintains a list of fruits in its state. The component renders a list of ListItem components, each displaying a fruit. We have used PureComponent for the ListItem component to take advantage of its automatic checking for prop changes.
import React, { PureComponent } from 'react'; class ListItem extends PureComponent { render() { return <li> {this.props.value}</li>; } } class ListComponent extends PureComponent { constructor(props) { super(props); this.state = { items: ['Apple', 'Banana', 'Orange'], }; } render() { return ( <div> <h2>Fruit List:</h2> <ul> { this.state.items.map((item, index) => ( <ListItem key={index} value={item} /> )) } </ul> </div> ); } } export default ListComponent;
Output
This example shows how PureComponent can be useful when dealing with lists or arrays of items, as it helps avoid unnecessary re-renders when the data remains the same.
Example − Using Pure Component
This React app consists of two components: ParentComponent and ChildComponent. The primary goal of this app is to show the use of PureComponent in optimizing rendering in React applications.
import React, { PureComponent } from 'react'; class ChildComponent extends PureComponent { render() { return <h1>Hello, {this.props.name}!</h1>; } } class ParentComponent extends PureComponent { constructor(props) { super(props); this.state = { name: 'John', }; } render() { return <ChildComponent name={this.state.name} />; } } export default ParentComponent;
Output
Summary
PureComponent is a React tool that improves our app. It makes sure that a component of our program only updates when it is necessary. This can help our software run more effectively and respond to user inputs faster.
To Continue Learning Please Login
Login with Google