react-shallow-equal

import React, { PureComponent } from 'react'; import { propsEqual } from 'react-shallow-equal'; class MyOptimizedComponent extends PureComponent { // In a traditional React component (not PureComponent), you would implement this: // shouldComponentUpdate(nextProps, nextState) { // // Only re-render if props are NOT shallowly equal or state has changed // return !propsEqual(this.props, nextProps) || !shallowEqual(this.state, nextState); // } render() { // Simulate rendering based on props, e.g., from an API call or parent component const { data, isActive, onAction } = this.props; return ( <div> <h2>Item: {data.name}</h2> <p>Status: {isActive ? 'Active' : 'Inactive'}</p> <button onClick={onAction}>Perform Action</button> <p>Last updated: {new Date().toLocaleTimeString()}</p> </div> ); } } // Example of usage in a parent component function App() { const [count, setCount] = React.useState(0); const [itemData, setItemData] = React.useState({ id: 1, name: 'Example Item' }); const handleAction = React.useCallback(() => { console.log('Action performed!'); setCount(prev => prev + 1); }, []); // This prop object will be new on every render, but MyOptimizedComponent // would only re-render if data.name or isActive actually changed values // if using propsEqual inside shouldComponentUpdate. // With PureComponent, it handles this automatically with its own shallow comparison. const componentProps = { data: itemData, isActive: count % 2 === 0, onAction: handleAction, extraProp: count // This will cause PureComponent to re-render every time it changes }; React.useEffect(() => { const interval = setInterval(() => { // This update will cause App to re-render, creating new componentProps // PureComponent will then shallow compare these new props. setCount(c => c + 1); }, 2000); return () => clearInterval(interval); }, []); return ( <div> <h1>Parent App Render Count: {count}</h1> <MyOptimizedComponent {...componentProps} /> </div> ); }