Lifecycle with Hooks

Example

Mount the child, change its prop, then unmount it and watch the console.

import { useState, useEffect } from 'react';

function Child({ count }) {
  console.log('render, count =', count);

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

  useEffect(() => {
    if (count > 0) console.log('updated, count =', count);
  }, [count]);

  return <p>Child count: {count}</p>;
}

export default function App() {
  const [show, setShow] = useState(true);
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setShow(!show)}>{show ? 'Unmount' : 'Mount'} child</button>
      <button onClick={() => setCount(count + 1)}>Update prop</button>
      {show && <Child count={count} />}
    </div>
  );
}

Result