componentWillUnmount с React useEffect

Question

Как можно использовать useEffect крючок (или любой другой крючок в этом отношении) для репликации componentWillUnmount?

В традиционном компоненте класса я бы сделал что-то вроде этого:

class Effect extends React.PureComponent {
    componentDidMount() { console.log("MOUNT", this.props); }
    componentWillUnmount() { console.log("UNMOUNT", this.props); }
    render() { return null; }
}

С крючком useEffect:

function Effect(props) {
  React.useEffect(() => {
    console.log("MOUNT", props);

    return () => console.log("UNMOUNT", props)
  }, []);

  return null;
}

(Полный пример: https://codesandbox.io/s/2oo7zqzx1n)

Это не работает, поскольку функция "cleanup", возвращаемая в useEffect, фиксирует реквизиты, какими они были во время монтирования, а не состояние реквизита во время размонтирования.

Как я могу получить последнюю версию реквизита в useEffect clean * без запуска тела функции (или очистки) при каждом изменении реквизита?

Подобный вопрос не касается части доступа к последним реквизитам.

реагирует на документы состояние:

Если вы хотите запустить эффект и очистить его только один раз (при монтировании и демонтировании), вы можете передать пустой массив ([]) в качестве второго аргумента. Это говорит React, что ваш эффект не зависит от каких-либо значений из реквизита или состояния, поэтому его не нужно повторно запускать.

В этом случае, однако, я зависим от реквизита ... но только для части очистки ...

Answer 1

Вы можете использовать useRef и хранить реквизиты, которые будут использоваться в закрытии, например метод обратного вызова returnEase useEffect

function Home(props) {
  const val = React.useRef();
  React.useEffect(
    () => {
      val.current = props;
    },
    [props]
  );
  React.useEffect(() => {
    return () => {
      console.log(props, val.current);
    };
  }, []);
  return <div>Home</div>;
}

DEMO

Однаколучше передать второй аргумент useEffect, чтобы очистка и инициализация происходили при любом изменении требуемого реквизита

React.useEffect(() => {
  return () => {
    console.log(props.current);
  };
}, [props.current]);