React.memo 筆記

export default function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");
 
  return (
    <div className="App">
      <div>{count}</div>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Add
      </button>
      <br />
      <input
        value={name}
        onInput={(e) => {
          setName(e.target.value);
        }}
      />
      <Child name={name} />
    </div>
  );
}

function Child({ name }) {
  console.log("child component re-rendered");
 
  return <div>My name is {name}</div>;
}
 
export default Child;

export default React.memo(Child);