Is there a way to universally cancel all calls to setstate on any unmounted component or to hide the errors produced by attempting it?

Question

I'll start by saying i'm not actually trying to hide the errors, i'm going to fix them, but I need to know if it is possible.

I'm rewriting a react project with a .net back end, transitioning from framework to core.

I have two components (one in the original project and the one in the new project) that are essentially the same.

They are a modal that, when opened, gather and display an article. If the modal is closed, the component gets unmounted, and if it is before the article data is returned (using fetch), it currently errors because it is trying to update the state of an unmounted component.

This behavior is expected.

On the new project, I was about to add an AbortController to abort the fetch call when needed but I noticed that in the old project, when closing the modal before the data is gathered, doesnt give me an error. The component unmounts, then the state updates, but I don't get an error for some reason. There is no 'isMounted' variable keeping track of the mount state and there is no abort controller.

I added console logs to each relevant method to be sure it was unmounting before the state update.

old project console output

new project console output

Is there something that could be hiding these errors? Or preventing the action all together?

both projects are using react 16, but the old projects is referenced externally ( https://unpkg.com/react@16/umd/react.development.js ) and the new is provided via npm (^16.8.6).

here is the relevant code from the old project since this is the one were the errors are not being produced(the new project is virtually the same)

componentDidMount() {
    fetch(`{url to get article}`,
        { credentials: "include", headers: { accept: "application/json" } })
        .then(res => res.json())
        .then(gatheredData => this.setState({ gatheredData }))
}

there is no componentWillUnmount.

Answer 1

This is how I do it when I can't remove the call from the component

componentDidMount() {
    this.mounted=true
    fetch(`{url to get article}`,
        { credentials: "include", headers: { accept: "application/json" } })
        .then(res => res.json())
        .then(gatheredData => {
          if (this.mounted) {
            this.setState({ gatheredData })
          }
        })
}

componentWillUnmount() {
    this.mounted=false
}

Answer 2

I figured out that in the old project, the original writer wrote it in a way that (even though it was specified to use the full version in development) it was always importing the minified production version of react externally. That's what caused the errors not to show. When I fixed that, console lit up like a Christmas tree.