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.

Per the React docs - If your effect returns a function, React will run it when it is time to clean up. https://reactjs.org/docs/hooks-effect.html. The returned function will fire when the component unmounts.

Your CheckSupply doesn't currently have a return statement. I'm assuming the value you care about is supply, so you would do:

  export async function CheckSupply() {
    const near = await connect(getConfig);
    const account = await near.account("myaddress");
    const supply = await account.viewFunction(
        "myaddress", 
        "nft_total_supply", 
        {}
    )
    return supply; // <----- added
  }

You also don't have any code that uses the return value, so you'll need to add that. Note that since CheckSupply is an async function, it will be returning a promise, so you'll need to await that promise to interact with the eventual supply value:

useEffect(() => {
  const load = async () => {
    const supply = await CheckSupply();
    // Do something with `supply`. Maybe set state?
  };
  load();
}, [])

You can get that result, but you'll need to do it a different way.

When your component renders for the first time, the entire function will run, and then the page will be updated based on what your function returned. This happens more or less synchronously. Only after it has rendered will your effects run. It's not possible to change the order of this: render is always first, effects are always after the render.

So if you don't want anything to display until that effect can complete, you need to return a null from the render. Then when the fetch is complete, you update state, which causes it to render again, this time not with a null.

For example, here i've taken your code and added one more possibility: the state might be null. I'm using this to indicate that it hasn't loaded yet. Later, once the data has been fetched, the state gets updated and the component rerenders.

const [posts, setPosts] = useState(null);

useEffect(() => {
  (async () => {
    const data = await fetch('https://localhost:1111/api/posts', {
      credentials: 'include'
    });
    const response = await data.json();
    setPosts(response);
  })();
}, []);

if (posts === null) {
  return null;
}

return (
  <div>
    {posts.length > 0 ? (
      posts.map(post => (
        <Post key={post.id} onUpdate={() => handleUpdate()} post={post} />
      ))
    ) : (
      <p>No posts</p>
    )}
  </div>
);

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.