React Lifecycle: useEffect vs useLayoutEffect

Medium

Determine the order of console.log output when using useEffect and useLayoutEffect. Question: What will be the order of console output and why? Hints: • useLayoutEffect runs synchronously after all DOM mutations • useEffect runs asynchronously after paint • Both hooks fire after render phase Acceptance Criteria: ✓ Correct order of all console.log calls ✓ Explanation of difference between useEffect and useLayoutEffect ✓ Understanding of hook execution timing

React Lifecycle: useEffect vs useLayoutEffect

Medium

Close file
Close file
import { useEffect, useLayoutEffect } from 'react';

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

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

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

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

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

Preview

Console