React.memo

Example

React.memo wraps a component and compares old and new props (shallowly). Typing in the input re-renders the parent; only the plain chart re-renders with it.

import { useState, memo } from 'react';

function Chart({ title }) {
  console.log('render ' + title);
  return <p>📊 {title}</p>;
}
const MemoChart = memo(Chart);

export default function App() {
  const [text, setText] = useState('');
  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Type here" />
      <Chart title="Plain chart" />
      <MemoChart title="Memo chart" />
    </div>
  );
}

Result