❄️ Сегодня разберем задачку, которая часто вызывала у меня трудности на собеседованиях: 
порядок вывода console.log в функциональном компоненте React.

Пример:

import React from 'react';

const Inner = () => {
  console.log('render-inner');
  return null;
}

export function App() {
  const [counter, setCounter] = React.useState(0);
  
  console.log('render-1', counter);

  React.useEffect(() => {
    setCounter(1);
    console.log('effect-1', counter);
  }, []);

  React.useEffect(() => {
    setCounter(2);
    console.log('effect-2', counter);
  }, [counter]);
  
  console.log('render-2', counter);
  return <Inner />;  
}
}

Основные правила жизненного цикла React

1️⃣ Монтирование компонента 🛠

➖React сначала выполняет рендер компонента.
➖Внутри рендера выполняются все синхронные операции, включая вызовы `console.log`.
➖После рендера React монтирует компонент в DOM.

2️⃣ Запуск эффектов (useEffect) ⚡️

➖После монтирования React запускает эффекты (useEffect).
➖Эффекты с пустым массивом зависимостей ([]) выполняются только один раз после первого рендера.
➖Эффекты с зависимостями (например, [counter]) выполняются после каждого рендера, если зависимости изменились.

3️⃣ Обновление состояния (setState) 🔄

➖Если внутри эффекта вызывается setState, React планирует обновление состояния.
➖Обновление состояния приводит к повторному рендеру компонента.

4️⃣ Повторный рендер 🔁

➖После обновления состояния React снова выполняет рендер компонента.
➖Если в результате рендера изменяются зависимости эффектов, эти эффекты снова выполняются.

Итоговый порядок вывода
render-1 0
render-2 0
render-inner
effect-1 0
effect-2 0
render-1 2
render-2 2
render-inner
effect-2 2
render-1 2
render-2 2

#Собеседование #React