Example 8

react-component-updates-demo-8.jsx

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

  const increment = useCallback(() => {
    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>
    </>
  );
};