Example 7

react-component-updates-demo-7.jsx

const App = () => {
  const [counter, setCounter] = useState(0);
  const [aboveFive, setAboveFive] = useState(false);

  const increment = () => {
    setCounter(n => n + 1);
  };

  useEffect(() => {
    if (counter > 5) {
      setAboveFive(true);
    }
  }, [counter]);

  const button = useMemo(() => <button onClick={increment}>++</button>, [
    increment
  ]);

  return (
    <>
      <h1>App: {counter}</h1>
      <Child isAboveFive={aboveFive}>{button}</Child>
    </>
  );
};

const Child = React.memo(({ isAboveFive, children }) => {
  console.log("child renders");
  return (
    <>
      <h2>Child: {!isAboveFive ? "<= 5" : "> 5"}</h2>
      {children}
    </>
  );
});