Остановить реактивный функциональный компонент (который использует хуки) от повторного рендеринга

Question

У меня есть чистый функциональный компонент, где я получаю некоторые данные, используя useEffect. Я передаю пустую строку в useEffect, поэтому она действует так, как компонент монтировал .

const getData = () => {
    setTimeout(() => {
        setLocalState({ a: 2 });
        setIsLoading(false);
    }, 0);
};

useEffect(() => getData(), []);

Весь мой компонент перерисовывается дважды прямо сейчас Я хочу контролировать это поведение и перерисовывать только при определенных условиях

Здесь я хочу, чтобы компонент перезапустился, когда setLocalState установил localState , но не когда setIsLoading установил isLoading в значение false .

Вот песочница для кода этой проблемы: https://codesandbox.io/s/0oyp6j506p

Answer 1

Если мы вызываем несколько установщиков состояний вне событий, основанных на реакции, запускаются несколько визуализаций, но в компонентах класса изменения состояния будут объединяться вместе.Но в долгосрочном плане это будет исправлено, о чем упоминается здесь

Это нормальное поведение React.Он работает точно так же, если бы вы вызывали setState () в компоненте класса несколько раз.

В настоящее время React будет пакетно обновлять состояние, если они запускаются из события, основанного на React, например, нажатие кнопкиили изменение ввода.Пакетные обновления не будут запускаться, если они запускаются вне обработчика событий React, например, setTimeout ().

Я думаю, что в долгосрочной перспективе планируется всегда пакетные события, но не уверен в деталях.