effect.example.tsx

import { useEffect, useState } from 'react';

export default Page;

function Page() {
  const [visible, setVisible] = useState(true);
  const hideCounter = () => setVisible(false);

  return (
    <main>
      <button type="button" onClick={hideCounter}>
        Hide counter
      </button>

      <div>{visible && <Counter />}</div>
    </main>
  );
}

function Counter() {
  const [counter, setCounter] = useState(1);
  const increment = () => setCounter(counter + 1);

  useEffect(() => {
    return () => console.log('Counter unmounted');
  }, []);

  useEffect(() => {
    return () => console.log('Counter changed', counter);
  }, [counter]);

  return <button onClick={increment}>{counter}</button>;
}