Example 4

react-component-updates-demo-4.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 = <button onClick={increment}>++</button>;
  const child = useMemo(() => <Child isAboveFive={aboveFive} />, [aboveFive]);

  return (
    <>
      <h1>App: {counter}</h1>
      {child}
      {button}
    </>
  );
};