Memoization

Theory

Loading visualization...

Loading...

Back to React topics

Memoization

Theory

Source Code

const MemoChild = React.memo(({ name }) => {
  return <p>Hello, {name}</p>;
});
 
function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(c => c + 1)}>
        +
      </button>
      <MemoChild name="Alice" />
    </div>
  );
}

Component Tree

waiting

Memo Cache

no cache entries yet

Render Decisions

no render decisions yet

Loading visualization...

Source Code

const MemoChild = React.memo(({ name }) => {
  return <p>Hello, {name}</p>;
});
 
function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(c => c + 1)}>
        +
      </button>
      <MemoChild name="Alice" />
    </div>
  );
}

Component Tree

waiting

Memo Cache

no cache entries yet

Render Decisions

no render decisions yet