import { useEffect, useLayoutEffect, useState } from 'react';

export default function App() {
  const [state, setState] = useState(0);

  useEffect(() => {
    console.log(state, 'Hack Frontend effect');

    return () => {
      console.log(state, 'Hack Frontend effect cleanup');
    };
  }, [state]);

  useLayoutEffect(() => {
    console.log(state, 'Hack Frontend layout effect');

    return () => {
      console.log(state, 'Hack Frontend layout cleanup');
    };
  }, [state]);

  return (
    <div>
      <button onClick={() => setState((prev) => prev + 1)}>
        click (current: {state})
      </button>
    </div>
  );
}

// Question 1: What logs appear on MOUNT?
// Your answer:
// 
// 
// Question 2: What logs appear after CLICK?
// Your answer:
// 
// 
// Explanation: ?