Реагировать useState вызвать двойной рендеринг

Question

Рассмотрим канонический пример useState:

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);
  console.log(count);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      count: {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default MyComponent;

При нажатии кнопки каждое состояние печатается дважды. Почему это так?

Answer 1

Поместите console.log в useEffect хук без зависимостей, и вы увидите, что он не на самом деле рендеринг дважды.

import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count);
  });

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      count: {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default MyComponent;

Вот хорошая диаграмма жизненного цикла компонента, в которой перечислены функции жизненного цикла на основе классов, но фазы рендеринга / принятия совпадают.

Важно отметить, что компонент может быть «визуализирован» без фактической фиксации (то есть обычного рендеринга, который вы видите на экране). Только console.log является частью этого. Эффекты запускаются после в фазе «фиксации».

useEffect

... Функция, переданная в useEffect, будет запущена после рендеринг фиксируется на экране. ...

По умолчанию эффекты запускаются после каждого завершенного рендеринга, ...

Answer 2

Еще немного информации о двойном повторном рендеринге (в соответствии с закрытой реакцией).

Это преднамеренная особенность StrictMode. Это происходит только в процессе разработки и помогает найти случайные побочные эффекты, введенные в фазу рендеринга. Мы делаем это только для компонентов с крючками, потому что они с большей вероятностью могут иметь побочные эффекты в неправильном месте.

https://github.com/facebook/react/issues/15074

другой связанный вопрос здесь.

useState () сделать двойной рендеринг