Реагирует на использование Действует исчерпывающим образом, только триггер для создания компонента отключает функциональность

Question

Я пытаюсь реализовать обратный вызов useEffect для отправки действия перед размонтированием компонента. Смысл этого действия - сохранить последнее состояние моего компонента, чтобы я мог вернуться из этого состояния в следующий раз, когда этот компонент будет загружен. Я хочу, чтобы этот обратный вызов запускался только при размонтировании.

При попытке использовать пустой массив зависимостей для моего useEffect правило "исчерпывающих зависимостей" реагирует на рекомендуемые требования "eslint-plugin-react-hooks". Я включаю значение, которое я пытаюсь сохранить. Это приводит к тому, что эффект и, следовательно, действие запускаются каждый раз, когда я сохраняю состояние.

Есть ли лучший способ справиться с этой ситуацией, чем отключить eslint для этой строки?

Вот что я хочу:

...
const [value, setValue] = useState('');

useEffect(() => {
    return () => {
        storeValueAction(value);
    };
}, []);
...

Так, как этого хочет eslint-plugin-react-hooks, и что действие отправляется при каждом изменении состояния:

...
const [value, setValue] = useState('');

useEffect(() => {
    return () => {
        storeValueAction(value);
    };
}, [value, storeValueAction]);
...

Есть ли что-то еще, кроме useEffect, которое я должен использовать для этого?

Answer 1

Даже если вы реализуете его текущим способом и отключите правило eslint, ожидаемый результат не будет правильным, так как значение состояния, отправленное при размонтировании, будет значением состояния во время первоначального монтирования из-за закрытия.

В таком случае вы можете использовать useRef вместе с useEffect для достижения желаемого результата. Как только вы это сделаете, вы можете безопасно отключить правило eslint, будучи уверенным, что ваш код не приведет к неожиданному поведению.

const [value, setValue] = useState('');
const valueRef = useRef(value);

useEffect(() => {
   valueRef.current = value;
}, [value]);

useEffect(() => {
    return () => {
        storeValueAction(valueRef.current);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);