useMemo Hook

useMemo prevents unnecessary rendering of child components:

import React, { useState, useEffect, useMemo } from "react";
 
const Child = ({ param }) => {
  useEffect(() =>
    console.log("child rendered at ", new Date().toLocaleTimeString())
  );
  return <div>prop in child: {param}</div>;
};
 
const App = () => {
  const [counter, setCounter] = useState(3);
  const [childProp, setChildProp] = useState(30);
 
  const handleChange = () => setCounter((prev) => prev + 1);
  const handleChangeChild = () => setChildProp((prev) => prev + 10);
 
  const memoChild = useMemo(() => <Child param={childProp} />, [childProp]);
 
  return (
    <>
      {counter}
      <br />
      <button onClick={handleChange}>change parent counter</button>
      <button onClick={handleChangeChild}>change child prop</button>
      {memoChild}
    </>
  );
};
 
export default App;