Поведение React‑компонента при условном рендеринге и зависимостях useEffect

Условие

Проанализировать, как работает React‑компонент, когда JSX возвращается условно внутри if‑оператора, а хук useEffect использует значение пропса в массиве зависимостей.

function Component(props) {
  const [counter, setCounter] = useState(0);

  const handleClick = () => {
    setCounter(s => s + 1);
  };

  useEffect(() => {
    let update = counter * 2 + props.value;
    console.log(update);
  }, [props.value]);

  if (counter % 2 === 0) {
    return (
      <>
        <MyButton handleClick={handleClick} />
      </>
    );
  }

  return (
    <>
      <div>{counter}</div>
      <MyButton handleClick={handleClick} />
    </>
  );
}

Ответ

При чётном counter число скрыто, при нечётном показано. Эффект запускается после первого commit и изменения props.value, но не при изменении одного counter: его нет в зависимостях.

При первом выполнении эффекта counter равен 0, поэтому для числового props.value выводится его значение. Нажатие кнопки использует корректный функциональный updater. Когда props.value меняется, новый эффект видит counter соответствующего рендера — он не навсегда равен нулю.

Если лог должен обновляться при каждом изменении формулы, зависимости должны быть [counter, props.value]. Все хуки стоят до условного return, поэтому правило порядка хуков здесь не нарушено. В development Strict Mode начальный эффект может запускаться повторно для проверки очистки; считать точное число логов без окружения нельзя.