PureComponent
PureComponent is a base-class component provided by React that implements a shallow comparison of props and states to determine if a component should re-render.that is particularly useful for class components to optimize performance.
Syntax:
class MyComponent extends React.PureComponent {
// Component logic
}
Features:
- PureComponent performs a shallow comparison of props and state to decide whether to re-render.
- It is particularly useful for class components to optimize performance.
- Stateless:Pure componets do not hold any internal state.they recieve data through props and render UI based on that data.
- Performance Optimization:Pure components render implement a shouldComponentUpdate lifecycle method with shallow props and state comparison.
- Easy Testing:with dererministic rendering and predictable behavior,pure components are easier to test.
For the PureComponet Install the required package in your application using the following command.
npm install react-motion
Example: Below is an example of creating a PureComponent.
import React, { PureComponent } from 'react';
class ExampleComponent extends PureComponent {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
handleClick = () => {
this.setState(prevState => ({
count: prevState.count + 1
}));
};
render() {
console.log('Render called');
return (
<div>
<h1>Count: {this.state.count}</h1>
<button onClick={this.handleClick}>Increment</button>
</div>
);
}
}
export default ExampleComponent;
Output:
Example of React.memo():
// App.js
import React, {
useState
} from 'react';
import {
Motion,
spring
} from 'react-motion';
import './App.css';
const TodoItem = React.memo(({ todo, onDelete }) => {
return (
<Motion defaultStyle={{ opacity: 0, x: -50 }}
style={{ opacity: spring(1), x: spring(0) }}>
{({ opacity, x }) => (
<li style={{
opacity,
transform: `translateX(${x}px)`
}}>
<span>{todo}</span>
<button onClick={onDelete}>
Delete
</button>
</li>
)}
</Motion>
);
});
const App = () => {
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');
const handleInputChange = (e) => {
setInputValue(e.target.value);
};
const handleAddTodo = () => {
if (inputValue.trim() !== '') {
setTodos((prevTodos) =>
[...prevTodos, inputValue]);
setInputValue('');
}
};
const handleDeleteTodo = (index) => {
setTodos((prevTodos) =>
prevTodos.filter((_, i) => i !== index));
};
return (
<div className="app">
<h1 className="title">React Motion To-Do List</h1>
<div className="input-container">
<input
type="text"
value={inputValue}
onChange={handleInputChange}
placeholder="Enter your to-do"
/>
<button onClick={handleAddTodo}>Add</button>
</div>
<ul className="todo-list">
{todos.map((todo, index) => (
<TodoItem key={index} todo={todo}
onDelete={() => handleDeleteTodo(index)} />
))}
</ul>
</div>
);
};
export default App;
Output:
Difference between React.memo() and PureComponent
We know that both `React.memo()` and `PureComponent‘ are maximizing techniques in React to improve performance by intercepting unnecessary re-renders. That is the process of building fast and smooth applications. In this article, we will explore how PureComponent and React.memo work and show you how to use them in your React native applications.
Table of Content
- React.memo()
- PureComponent
- Difference Between React.memo() and PureComponent
- Conclusion