title: react hooks useEffect() cleanup for only componentWillUnmount?
body: <p>Let me explain the result of this code for asking my issue easily.</p>
  
  <pre><code>const ForExample = () =&gt; {
      const [name, setName] = useState('');
      const [username, setUsername] = useState('');
  
      useEffect(() =&gt; {
          console.log('effect');
          console.log({
              name,
              username
          });
  
          return () =&gt; {
              console.log('cleaned up');
              console.log({
                  name,
                  username
              });
          };
      }, [username]);
  
      const handleName = e =&gt; {
          const { value } = e.target;
  
          setName(value);
      };
  
      const handleUsername = e =&gt; {
          const { value } = e.target;
  
          setUsername(value);
      };
  
      return (
          &lt;div&gt;
              &lt;div&gt;
                  &lt;input value={name} onChange={handleName} /&gt;
                  &lt;input value={username} onChange={handleUsername} /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;div&gt;
                      &lt;span&gt;{name}&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;span&gt;{username}&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  };
  </code></pre>
  
  <p>When the <code>ForExample component</code> mounts, 'effect' will be logged. This is related to the <code>componentDidMount()</code>.</p>
  
  <p>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 <code>[username]</code> to the second parameter of <code>useEffect()</code>. This is related to the <code>componentDidUpdate()</code></p>
  
  <p>Lastly, when the <code>ForExample component</code> unmounts, 'cleaned up' will be logged. This is related to the <code>componentWillUnmount()</code>.</p>
  
  <p>We all know that.</p>
  
  <p>To sum, 'cleaned up' is invoked whenever the component is being re-rendered(includes unmount)</p>
  
  <p>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 <code>useEffect()</code> to <code>[]</code>.</p>
  
  <p>But If I change <code>[username]</code> to <code>[]</code>, <code>ForExample component</code> no longer implements the <code>componentDidUpdate()</code> for name input.</p>
  
  <p>What I want to do is that, to make the component supports  both <code>componentDidUpdate()</code> only for name input and <code>componentWillUnmount()</code>. (logging 'cleaned up' for only the moment when the component is being unmounted)</p>