react hooks useEffect cleanup for only componentWillUnmount

Question

Let me explain the result of this code for asking my issue easily   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              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 componentWillUnmount     logging  cleaned up  for only the moment when the component is being unmounted

User · Answer

useEffect are isolated within its own scope and gets rendered accordingly  Image from https   reactjs org docs hooks-custom html

User · Answer

function LegoComponent        const  lego  setLegos    React useState        React useEffect      gt        let isSubscribed   true     fetchLegos   then  legos  gt          if  isSubscribed            setLegos legos                     return      gt  isSubscribed   false              return        lt ul gt       legos map lego  gt   lt li gt  lego  lt  li gt         lt  ul gt          In the code above  the fetchLegos function returns a promise  We can    cancel    the promise by having a conditional in the scope of useEffect  preventing the app from setting state after the component has unmounted      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

User · Answer

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   x000D   x000D  const   useState  useEffect     React  x000D   x000D  const ForExample        gt    x000D    const  name  setName    useState      x000D    const  username  setUsername    useState      x000D   x000D    useEffect  x000D           gt    x000D        console log  effect    x000D         x000D       username  x000D       x000D   x000D    useEffect      gt    x000D      return      gt    x000D        console log  cleaned up    x000D         x000D            x000D   x000D    const handleName   e   gt    x000D      const   value     e target  x000D   x000D      setName value   x000D       x000D   x000D    const handleUsername   e   gt    x000D      const   value     e target  x000D   x000D      setUsername value   x000D       x000D   x000D    return   x000D       lt div gt  x000D         lt div gt  x000D           lt input value  name  onChange  handleName    gt  x000D           lt input value  username  onChange  handleUsername    gt  x000D         lt  div gt  x000D         lt div gt  x000D           lt div gt  x000D             lt span gt  name  lt  span gt  x000D           lt  div gt  x000D           lt div gt  x000D             lt span gt  username  lt  span gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D       x000D     x000D   x000D  function App     x000D    const  shouldRender  setShouldRender    useState true   x000D   x000D    useEffect      gt    x000D      setTimeout      gt    x000D        setShouldRender false   x000D         5000   x000D            x000D   x000D    return shouldRender    lt ForExample   gt    null  x000D    x000D   x000D  ReactDOM render  lt App   gt   document getElementById  root     x000D   lt script src  https   unpkg com react 16 umd react development js  gt  lt  script gt  x000D   lt script src  https   unpkg com react-dom 16 umd react-dom development js  gt  lt  script gt  x000D   x000D   lt div id  root  gt  lt  div gt  x000D   x000D   x000D

User · Answer

instead of creating too many complicated functions and methods what I do is I create an event listener and automatically have mount and unmount done for me without having to worry about doing it manually  Here is an example    componentDidMount useEffect       gt         window addEventListener  quot load quot    pageLoad          component will unmount     return      gt                    window removeEventListener  quot load quot   pageLoad                now that this part is done I just run anything I want from the pageLoad function like this  const pageLoad        gt   console log I was mounted and unmounted automatically  D

User · Answer

you can use more than one useEffect  for example if my variable is data1 i can use all of this in my component  useEffect       gt  console log  mount          useEffect       gt  console log  will update data1      data1      useEffect       gt  console log  will update any      useEffect       gt       gt  console log  will update data1 or unmount      data1      useEffect       gt       gt  console log  unmount

User · Answer

To add to the accepted answer  I had a similar issue and solved it using a similar approach with the contrived example below  In this case I needed to log some parameters on componentWillUnmount and as described in the original question I didn t want it to log every time the params changed  const componentWillUnmount   useRef false      This is componentWillUnmount useEffect      gt        return      gt            componentWillUnmount current   true               useEffect      gt        return      gt               This line only evaluates to true after the componentWillUnmount happens          if  componentWillUnmount current                console log params                       params      This dependency guarantees that when the componentWillUnmount fires it will log the latest params

[reactjs] react hooks useEffect() cleanup for only componentWillUnmount?

Examples related to reactjs

Examples related to react-hooks