Реагировать перехватывает очистку useEffect () только для componentWillUnmount?

Поскольку очистка не зависит от username, вы можете поместить очистку в отдельный useEffect, которому в качестве второго аргумента передается пустой массив.

Пример

const { useState, useEffect } = React;

const ForExample = () => {
  const [name, setName] = useState("");
  const [username, setUsername] = useState("");

  useEffect(
    () => {
      console.info("effect");
    },
    [username]
  );

  useEffect(() => {
    return () => {
      console.info("cleaned up");
    };
  }, []);

  const handleName = e => {
    const { value } = e.target;

    setName(value);
  };

  const handleUsername = e => {
    const { value } = e.target;

    setUsername(value);
  };

  return (
    <div>
      <div>
        <input value = {name} onChange = {handleName} />
        <input value = {username} onChange = {handleUsername} />
      </div>
      <div>
        <div>
          <span>{name}</span>
        </div>
        <div>
          <span>{username}</span>
        </div>
      </div>
    </div>
  );
};

function App() {
  const [shouldRender, setShouldRender] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setShouldRender(false);
    }, 5000);
  }, []);

  return shouldRender ? <ForExample /> : null;
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://unpkg.com/react@16/umd/react.development.js"></script>
<script src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id = "root"></div>

Вы можете использовать более одного useEffect().

Например, если моя переменная data1, я могу использовать все это в своем компоненте:

useEffect( () => console.info("mount"), [] );
useEffect( () => console.info("data1 update"), [ data1 ] );
useEffect( () => console.info("any update") );
useEffect( () => () => console.info("data1 update or unmount"), [ data1 ] );
useEffect( () => () => console.info("unmount"), [] );

function LegoComponent() {

  const [lego, setLegos] = React.useState([])

  React.useEffect(() => {
    let isSubscribed = true
    fetchLegos().then( legos=> {
      if (isSubscribed) {
        setLegos(legos)
      }
    })
    return () => isSubscribed = false
  }, []);

  return (
    <ul>
    {legos.map(lego=> <li>{lego}</li>)}
    </ul>
  )
}

В приведенном выше коде функция fetchLegos возвращает обещание. Мы можем «отменить» обещание, используя условное выражение в области действия useEffect, не позволяющее приложению устанавливать состояние после размонтирования компонента.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

useEffect изолированы в своей собственной области видимости и соответственно отображаются. Изображение из https://reactjs.org/docs/hooks-custom.html

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

//componentDidMount
useEffect( () => {

    window.addEventListener("load",  pageLoad);

    //component will unmount
    return () => {
       
        window.removeEventListener("load", pageLoad);
    }

 });

теперь, когда эта часть выполнена, я просто запускаю все, что хочу, из функции pageLoad, как это.

const pageLoad = () =>{
console.info(I was mounted and unmounted automatically :D)}

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

const componentWillUnmount = useRef(false)

// This is componentWillUnmount
useEffect(() => {
    return () => {
        componentWillUnmount.current = true
    }
}, [])

useEffect(() => {
    return () => {
        // This line only evaluates to true after the componentWillUnmount happens 
        if (componentWillUnmount.current) {
            console.info(params)
        }
    }

}, [params]) // This dependency guarantees that when the componentWillUnmount fires it will log the latest params

Используя пользовательские события js, вы можете эмулировать размонтирование компонентаWillUnmount даже при наличии зависимости.

Проблема:

    useEffect(() => {
    //Dependent Code
    return () => {
        // Desired to perform action on unmount only 'componentWillUnmount' 
        // But it does not
        if (somethingChanged){
            // Perform an Action only if something changed
        }
    }
},[somethingChanged]);

Решение:

// Rewrite this code  to arrange emulate this behaviour

// Decoupling using events
useEffect( () => {
    return () => {
        // Executed only when component unmounts,
        let e = new Event("componentUnmount");
        document.dispatchEvent(e);
    }
}, []);

useEffect( () => {
    function doOnUnmount(){
        if (somethingChanged){
            // Perform an Action only if something changed
        }
    }

    document.addEventListener("componentUnmount",doOnUnmount);
    return () => {
        // This is done whenever value of somethingChanged changes
        document.removeEventListener("componentUnmount",doOnUnmount);
    }

}, [somethingChanged])

Предостережения:использованиеЭффекты должны быть в порядке, использованиеЭффект без зависимости должны быть записаны раньше, чтобы избежать вызова события после его удаления.