import { useState, useEffect } from 'react';

export default function App() {
  console.log('Hack Frontend 1');

  useEffect(() => {
    console.log('Hack Frontend 2');
  }, []);

  return <Child />;
}

function Child() {
  console.log('Hack Frontend 3');

  useEffect(() => {
    console.log('Hack Frontend 4');
  }, []);

  return <div>Hack Frontend</div>;
}

// Question: What is the order of console.log output?
// Your answer:
// 1. ?
// 2. ?
// 3. ?
// 4. ?
// 
// Explanation: ?