React Lifecycle: useEffect vs useLayoutEffect

Среднее

Определите порядок вывода console.log при использовании useEffect и useLayoutEffect. Вопрос: Какой будет порядок вывода в консоль и почему? Подсказки: • useLayoutEffect выполняется синхронно после всех изменений DOM • useEffect выполняется асинхронно после paint • Оба хука срабатывают после render фазы Критерии приемки: ✓ Правильно определен порядок всех console.log ✓ Объяснена разница между useEffect и useLayoutEffect ✓ Понимание timing выполнения хуков

React Lifecycle: useEffect vs useLayoutEffect

Среднее

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

Загрузка...

React Lifecycle: useEffect vs useLayoutEffect

Среднее

React Lifecycle: useEffect vs useLayoutEffect

Среднее

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