React Lifecycle: Complex Effect Chain

Сложная

Определите порядок вызова при сложной цепочке эффектов и изменений состояния. Вопрос: Какой будет полный порядок вызова console.log с момента монтирования до завершения всех эффектов? Подсказки: • Эффект может вызвать setState, что приведет к ре-рендеру • При ре-рендере сначала вызываются cleanup функции • Компонент может рендериться несколько раз подряд • Эффекты с разными зависимостями срабатывают по-разному Критерии приемки: ✓ Правильно определен порядок ВСЕХ console.log ✓ Объяснено, сколько раз произойдет рендер ✓ Объяснено, какие эффекты сработают при каждом рендере ✓ Понимание сложных цепочек эффектов

React Lifecycle: Complex Effect Chain

Сложная

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

export default function App() {
  const [count, setCount] = useState(1);

  console.log('Hack Frontend 1');

  useEffect(() => {
    console.log('Hack Frontend 2');

    return () => {
      console.log('Hack Frontend 3');
    };
  }, [count]);

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

  return <Child count={count} />;
}

function Child({ count }) {
  useEffect(() => {
    console.log('Hack Frontend 5');

    return () => {
      console.log('Hack Frontend 6');
    };
  }, [count]);

  return <div>Count: {count}</div>;
}

// Question: What is the COMPLETE order of console.log output?
// Your answer:
// 1. ?
// 2. ?
// 3. ?
// ... (continue)
// 
// How many times does the component render? ?
// Why? ?
// 
// Explanation: ?

Preview

Console