react hooks useEffect() cleanup for only componentWillUnmount?

Let me explain the result of this code for asking my issue easily.

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

    useEffect(() => {
        console.log('effect');
        console.log({
            name,
            username
        });

        return () => {
            console.log('cleaned up');
            console.log({
                name,
                username
            });
        };
    }, [username]);

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

        setName(value);
    };

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

        setUsername(value);
    };

    return (
        
            
                
                
            
            
                
                    {name}
                
                
                    {username}
                
            
        
    );
};

When the ForExample component mounts, 'effect' will be logged. This is related to the componentDidMount().

And whenever I change name input, both 'effect' and 'cleaned up' will be logged. Vice versa, no message will be logged whenever I change username input since I added [username] to the second parameter of useEffect(). This is related to the componentDidUpdate()

Lastly, when the ForExample component unmounts, 'cleaned up' will be logged. This is related to the componentWillUnmount().

We all know that.

To sum, 'cleaned up' is invoked whenever the component is being re-rendered(includes unmount)

If I want to make this component to log 'cleaned up' for only the moment when it is unmount, I just have to change the second parameter of useEffect() to [].

But If I change [username] to [], ForExample component no longer implements the componentDidUpdate() for name input.

What I want to do is that, to make the component supports both componentDidUpdate() only for name input and `componentW

Since the cleanup is not dependent on the username, you could put the cleanup in a separate useEffect that is given an empty array as second argument.

Example



const { useState, useEffect } = React;

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

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

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

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

setName(value);
};

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

setUsername(value);
};

return (







{name}


{username}



);
};

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

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

return shouldRender ? : null;
}

ReactDOM.render(, document.getElementById("root"));





Stack Overflow Q#55020041, score: 166