Search code examples
reactjsuse-effectarrow-functions

When does a "useEffect" with a double arrow notation get executed?

I'm using React 17. I came across this in a component ...

  useEffect(
    () => () => {
        ...
    },
    [pageVar]
  );

What does the double arrow notation mean with regards to when this hook is executed? I have seen a more traditional side effect ...

  useEffect(() => {
    ...
  }, [summary]);

which will be executed when the summary value changes (I think) but the double arrow notation above is completely new to me.

Solution

  • The returning function of a useEffect hook is known as a "clean-up function", which is called by React when the component is unmounted.

    In this case seems that the hook is only returning a clean-up function.

    You can read more in the React documentation.