Basically it's a combination of React.StrictMode double invoking the function body twice as a way to help you detect unexpected side-effects

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

• Class component constructor, render, and shouldComponentUpdate methods
• Class component static getDerivedStateFromProps method
• Function component bodies <-- this
• State updater functions (the first argument to setState)
• Functions passed to useState, useMemo, or useReducer

remounting the component to ensure reusable state

To help surface these issues, React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.

and the useEffect hook being called at the end of the render cycle.

function Homepage() {
  const [state, setState] = useState();

  useEffect(() => {
    console.log("useEffect"); // logs second as expected side-effect
    console.log("useEffect not executed");
    setState("hello");
  }, []);

  if (!state) {
    console.log("state not defined"); // logs first as unintentional side-effect
    return <div>State undefined</div>;
  }

  return <div>ciao</div>;
}

...

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import Homepage from "./Homepage";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <Homepage />
  </StrictMode>
);

Explaining the logs

console output:

state not defined      // <-- initial render
state not defined      // <-- double invocation of function body
useEffect              // <-- effect at end of initial render
useEffect not executed // <-- effect at end of initial render

...unmount/mount

useEffect              // <-- effect at end of render
useEffect not executed // <-- effect at end of render

useEffect runs when the page renders and the other functions execute before useEffect so your code runs the if (!state) first then useEffect runs and state sets to "hello"; here is a link to fully understand useEffect hook: useEffect; Good luck;

your if statement is running before the useEffect even tho is after it, you need to put both divs inside the return and remove the if

   return (
     {!state ? <div>State undefined</div> : <div>ciao</div>}
   )