useEffect запускается до рендеринга?

Question

export default function Example() {

   useEffect(()=>{
       console.log('DOM has not rendered anything yet')
   });

    return (
        <div>
            Hello
        </div>
    );
}

То, что я получаю с помощью приведенного выше кода, - это сначала сообщение консоли, а затем на моей странице появляется Hello. Тем не менее, отладка кода, который я вижу, return предшествует useEffect. Почему тогда Hello не отображается, когда useEffect запускается впервые?

Более того, если используется код из https://reactjs.org/docs/hooks-effect.html#example -using-hooks :

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

видя, что при первом выполнении обратного вызова useEffect видна только кнопка, а не You clicked 0 times.

Answer 1

См. Эффект хуков документы

Что делает useEffect? ​​ Используя этот хук, вы сообщаете React, что ваш компонент должен что-то делать после рендера . React запомнит переданную вами функцию (мы будем называть ее нашим «эффектом»), и вызовет ее позже после выполнения обновлений DOM . В этом случае мы устанавливаем заголовок документа, но мы также можем выполнять выборку данных или вызывать какой-либо другой императивный API.

Answer 2

Вот ваш код, вы можете открыть devtools и увидеть, что hello отображается, когда оператор отладчика приостанавливает ваш код. Вот как React ведет себя так, как задокументировано и как уже отметили 2 человека.

const { useState, useEffect } = React;
function App() {
  useEffect(() => {
    debugger;
    console.log('last');
  });
  console.log('first');
  //this is returned and react will render this to dom before
  //  your effect is called as documented and as 2 people already pointed out
  return <div>Hello</div>;
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 3

Попробуйте запустить этот код и посмотрите порядок сообщений журнала.

function App() {

  useEffect(() => {
    console.log('DOM has not rendered anything yet')
  });

  function hello() {
    console.log("render")
  }

  return (
    <div onClick={hello()} >
      Hello
    </div>
  );

}

useEffect похоже на componentDidMount в том, что оно запускается после первого рендеринга и после каждого обновления в dom.

Приведенный выше код демонстрирует, что сначала вызывается render, а затем useEffect.