1

Upon componentWillUnmount I want to send an array inside a useState to a postRequest function.

My useState array:

     const [array, setArray] = useState([]);

My componentWillUnmount function:

useEffect(() => {
    return () => {
      console.log(array); // logs "[]"
    // TODO: Send to a post request to BE
    }
  }, [])

I do also have a "normal" useEffect that listens on my useState array. When I add three elements inside it, the console logs shows there are three elemetns inside it

  useEffect(() => {
      console.log('array: ', array); // logs "(3) [{…}, {…}, {…}]" 
    }, [array]);

How come the array is empty in my componentWillUnmount function?

Edit: Adding array to the dependecy of the useEffect will make the function execute every time that array is updated, which is not what is desired. The function should only execute upon unmount with the values of the array

2 Answers 2

2

It's because the value of the variable did not changed inside hook because it initiated on componentDidMount and did not received an update because the second parameter is empty.

Since you only want to trigger it once if the component unmounts and not every time the value changes:

you can use useRef to "preserve" the value without rerendering the component.

const ref = useRef();

useEffect(() => {
  ref.current = array;
}, [array]);

useEffect(() => {
  return function cleanup() {
    console.log(ref.current); // here is your array
  };
}, []);
2
  • With that solution, the function will execute every time I update the array. I do not want that to happen. Is there a solution for that? Jul 5, 2022 at 12:15
  • @GustavVingtoft I posted an update
    – I am L
    Jul 5, 2022 at 12:19
1

When passing an empty dependency array as second argument to useEffect, the code inside the useEffect callback will only be run on mount. At this moment, array is still empty.

Does it work when you also add the array to the dependency array of the first useEffect like this?

useEffect(() => {
    return () => {
      console.log(array); // logs "[]"
    // TODO: Send to a post request to BE
    }
  }, [array])

BTW, I think you can also combine the two like this:

useEffect(() => {
    console.log('array: ', array); // logs "(3) [{…}, {…}, {…}]" 

    return () => {
      console.log(array); // logs "[]"
    // TODO: Send to a post request to BE
    }
  }, [array])
3
  • 1
    Yep that's it. Thank you. And to your second point, completely agree, it was just some quick code for display wise. Jul 5, 2022 at 12:10
  • @GustavVingtoft Just keep in mind that will also send the request if you change the array, for example by running setArray([...])
    – Idrizi.A
    Jul 5, 2022 at 12:12
  • Yeah I just realized that. I do not want this to happen. Is there a solution for that? Jul 5, 2022 at 12:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.