1. Why is the return a function? return () => { ignore = true };

From the docs:

Why did we return a function from our effect? This is the optional cleanup mechanism for effects. Every effect may return a function that cleans up after it. This lets us keep the logic for adding and removing subscriptions close to each other. They’re part of the same effect!

and

When exactly does React clean up an effect? React performs the cleanup when the component unmounts. However, as we learned earlier, effects run for every render and not just once. This is why React also cleans up effects from the previous render before running the effects next time. We’ll discuss why this helps avoid bugs and how to opt out of this behaviour in case it creates performance issues later below.

2. What is ignored used for in this example?

Initially in useEffect Hook ignore is set like, let ignore = false;.

When fetchProduct function executes it checks for ignore is true and accordingly sets setProduct(json).

This means we have state called product and setting the value in state using setProduct(json).

This product in state is used to render details on page.

Note: As [productId] is passed as second argument to useEffect, fetchProduct function will only get executes when productId changes.

See optimizing performance by skipping effects.

Your understanding of the sequence of events is correct. The only thing missing is the precise timing of the effect callbacks and cleanup.

When the component re-renders, any useEffects will have their dependency arrays analyzed for changes. If there has been a change, then that effect callback will run. These callbacks are guaranteed to run in the order that they're declared in the component. For example, below, a will always be logged just before b.

const App = () => {
    const [num, setNum] = React.useState(0);
    React.useEffect(() => {
      setInterval(() => {
        setNum(num => num + 1);
      }, 1000);
    }, []);
    React.useEffect(() => {
      console.log('a', num);
    }, [num]);
    React.useEffect(() => {
      console.log('b', num);
    }, [num]);
    return num;
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

These effect callbacks will run shortly after the browser re-paints.

Now add the effect cleanup callback into the mix. These will always run synchronously just before the effect callback for a render runs. For example, let's say the component starts at Render A, and in Render A, an effect hook has returned a cleanup callback. Then, some state changes, and a transition to Render B occurs, and there exists a useEffect with a dependency array that includes the state change. What will happen is:

• The functional component will be called with the new props/state, for Render B
• The component returns the new markup at the end of the function
• The browser repaints the screen if necessary
• The cleanup function from render A will run
• The effect callback from render B will run

You can see the source code for those last two actions here:

commitHookEffectListUnmount(Passive$1 | HasEffect, finishedWork);
commitHookEffectListMount(Passive$1 | HasEffect, finishedWork);

That first call invokes all cleanup callbacks from a prior render. That second call invokes all effect callbacks for the current render. Current render effect callbacks run synchronously after the execution of prior render cleanup callbacks.

Why:

A return statement will end your function directly and return a value. The code after a return statement in a function will not be executed. So in your case when you uncomment your return statement in your useEffect hook, than the getProducts() call will never happen and you don't see your console.log() output.

Solution:

You should put the return statement in your useEffect hook at the last line, so that the getProducts() call gets executed before the function returns a value.

 useEffect(() => {
    const getProducts = async () => {
      setLoading(true);
      const response = await fetch("any_url");
      if (componentMounted) {
        setData(await response.clone().json());
        setFilter(await response.json());
        setLoading(false);
        console.log(filter)
      }
    };

    getProducts();

    // move the return statement to the last line of your useEffect hook
    return () => {
       componentMounted = false;
    }
  },[]);

Either way, 'user' will always be returned first and only then the code in useEffect will run.

I quote the docs:

... useEffect will run after the render is committed to the screen.

In a shorter and simpler statement: useEffect runs only after the component finished rendering its JSX.

You don't need to add 'firebase' because you've already created a listener that will cause 'user' state to alter, thus re-rendering your DOM again (AND creating a new listener again).

I think it is a typical stale closure problem. And it is hard to understand at first.

With the empty dependency array the useEffect will be run only once. And it will access the state from that one run. So it will have a reference from the logAbandonListing function from this moment. This function will access the state from this moment also. You can resolve the problem more than one way.

One of them is to add the state variable to your dependency.

  useEffect(() => {
    return () => logAbandonListing()
  }, [progress])

Another solution is that you set the state value to a ref. And the reference of the ref is not changing, so you will always see the freshest value.

let[progress, setProgress] = React.useState(0);
const progressRef = React.createRef();
progressRef.current = progress;

...

  const logAbandonListing = () => {
    console.log(`progress inside: ${progressRef.current}`)
    if (progressRef.current > 0) {
      addToLog(userId)
    }
  }

If userId is changing too, then you should add it to the dependency or a reference.