React Lifecycle: useEffect Order

Medium

Determine the order of console.log output in the following code. Question: What will be the order of console output and why? Hints: • Think about execution order: render → commit → effects • Remember the order of hook calls • Consider component hierarchy (parent → child) Acceptance Criteria: ✓ Correct order of all console.log calls ✓ Explanation of why this order occurs ✓ Understanding of useEffect behavior

React Lifecycle: useEffect Order

Medium

Close file
Close file
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: ?

Preview

Console