Эффект не запускается (ни разу), когда в теле функции вызывается установщик состояния

Question

Пожалуйста, помогите мне понять, как работает установщик состояний при вызове внутри тела функции

const MyComponent = () => {
  const [state, setState] = useState(0);
  const flagRef = useRef(true);

  if (flagRef.current) setState(1);

  useEffect(() => {
    flagRef.current = false;
  });

  return 'MyComponent';
}

Запуск этого кода приведет к бесконечной повторной визуализации. Согласно документации React говорится, что функция setState используется для обновления состояния. Он принимает новое значение состояния и ставит в очередь повторный рендеринг компонента. Я интерпретирую это, как следующий рендер будет поставлен в очередь и будет запущен после завершения текущего рендеринга, включая запуск эффекта. Однако эффект никогда не запускается вообще, даже один раз, и цепочка повторного рендеринга происходит вечно, без выручки, даже если код снова обновляет то же состояние, т.е. 1

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

Answer 1

Рабочая версия вашего кода (фрагмент ниже):

ПРИМЕЧАНИЕ: Вы также можете добавить массив зависимостей в useEffect, чтобы определить, когда этот эффект должен запускаться.

https://reactjs.org/docs/hooks-effect.html

const MyComponent = () => {
  
  console.log('MyComponent is rendering...');
  
  const [state, setState] = React.useState(0);
  const flagRef = React.useRef(true);

  React.useEffect(() => {
    console.log('useEffect is running...');
    if (flagRef.current) {
      console.log('flagRef is true... will call setState(1) and turn flag to false...');
      setState(1);
      flagRef.current = false;
    }
    else {
      console.log('flagRef is false... I will not do anything');    
    }
  });

  return (
    <div>My state: {state}</div>
  );
}

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

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