Поведение 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} />
    </>
  );
}