React Hook - использовать эффект только для размонтирования компонента, а не при обновлении зависимостей

Question

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

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

Когда я использую хук очистки в useEffect, я должен включитьвходное значение в массиве зависимостей эффектов, которое заставляет удаленный вызов API выполняться при каждом обновлении входного значения. Если я не включаю входное значение в массив зависимостей эффектов, обновленное входное значение никогда не сохраняется.

Вот песочница для кода, которая показывает проблему и объясняет ожидаемый результат: https://codesandbox.io/s/competent-meadow-nzkyv

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

Answer 1

Вы можете использовать ref для захвата изменяющегося значения вашего текста, затем вы можете ссылаться на него в другом useEffect хуке, чтобы сохранить текст:

const [text, setText] = useState("");
const textRef = React.useRef(text);

React.useEffect( () => {
  textRef.current = text;    
}, [text])

React.useEffect( () => {
  return () => doSomething(textRef.current)
}, [])

Answer 2

thedude подход правильный. Немного подправил, для этого конкретного варианта использования значение input ref всегда одинаково:

function SavedInput() {
  const inputEl = useRef(null);
  React.useEffect(() => {
    return () => {
      save(inputEl.current.value);
    };
  }, []);

  return (
    <div>
      <input ref={inputEl} />
    </div>
  );
}

Таким образом, вы будете избегать повторного рендеринга, поскольку не устанавливаете никакого состояния.