Принудительно реагировать на визуализацию исходного состояния с помощью useEffect.

Question

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

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

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

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

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

Answer 1

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

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

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

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