Вызывает ли useState рендеринг, если начальное значение является функцией с обширными вычислениями?

Question

Я учусь реагировать на ловушки, и мне нужна некоторая ясность в этом.

Рассмотрим приведенный ниже код:

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

Если dom рендерится, а затем someExaciousComputation завершена, Реагирует на повторный рендер Дом после этого?

Любая помощь будет полезна.

Answer 1

Он не будет отображаться снова, но в то же время будет ждать окончания вычислений, потому что это синхронная операция, не может обрабатывать начальные вычисления асинхронно.

Лучший вариант с точки зрения пользовательского опыта и производительности приложений - чтобы избежать больших расчетов при создании объектов состояния с useState(). Вместо этого вы можете использовать useEffect():

Хук эффектов позволяет выполнять побочные эффекты в компонентах функций.

Например, с пустым массивом зависимостей оно будет выполнено только один раз:

const [result, setResult] = useState(null);

useEffect(() => {
   const value = someExpensiveComputation(props);
   setResult(value);   
}, []);

В конце это решение снова вызовет рендеринг, но вы можете обработать его в своем выражении return, как показано ниже:

return <>
   {
      result && <p>Result: {result}</p>
   }
<>

I надеюсь, что это поможет!