Memoization of Component

used to optimize Reconciliation by skipping any JSX comparison which saves time

!snippet Memo() with sub-component in todo app

import {memo, useState} from "react";
const Items = memo(function Items({items}) {
  return (
    <\>
      <h2\>Todo Items</h2\>
      <ul\>
        {items.map(todo => <li key={todo}\>{todo}</li\>)}
      </ul\>
    </\>
)})
function Todo() {
  const [item, setItems] = useState(["todo1","todo2"]);
  const [newItem, setNewItem] = useState("");
  function onSubmit(e) {
    setItems(items => items.concat([newItem]);
    setNewItem("");
    e.preventDefault();
  }
  const onChange = (e) => setNewItem(e.target.value);
  return (
    <main\>
      <Items items={items} /\>
      <form onSubmit={onSubmit}\>
        <input value={newItem} onChange={onChange} /\>
        <button\>Add</button\>
      </form\>
    </main\>
  )
}

Memo() wrapper around each Item sub-component

References