Принудительная реакция на рендеринг начального состояния с помощью useEffect

Я пытаюсь создать заполнитель для области во время загрузки данных. Предполагается, что он «растет» от оси x. Я создал простой функциональный компонент следующим образом

const [visible, setVisible] = useState(false);

useEffect(() => {
  setVisible(true);
}, []);

return(
  <Area
    ....
    y0={d => visible ? d.y : 0}
  />
)

Проблема, вероятно, в том, что React пакетирует обновления состояния - поэтому иногда график на самом деле «растет», но иногда он появляется сразу. Есть ли способ принудительно выполнить рендеринг начального состояния? Или какой-нибудь другой обходной путь?


reactjs react-hooks react-state-management
person Honza Kirchner    schedule 28.03.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В таких сценариях (работа с индикатором загрузчика) следует добавить таймаут анимации (эффект "нарастания"):

const [visible, setVisible] = useState(false);

useEffect(() => {
  setTimeout(() => {
    setVisible(true);
  }, 1000);
}, []);

return <Area y0={({ y }) => (visible ? y : 0)} />;
person Dennis Vash    schedule 28.03.2020