React component behavior with conditional rendering and useEffect dependencies

Analyze how a React component works when JSX is conditionally returned inside an if statement, and the useEffect hook uses the prop value in the dependency array.

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} />
    </>
  );
}