UseEffect hook cleanup not running when error occurs somewhere in project

I have the following code in my component;

useEffect(() => {
    console.log("hi");

    return () => {
      console.log("Goodbye")
    }
  }, []);

When the page with said component opens hi is logged and whenever I leave said page Goodbye is logged.

That is, unless somewhere else in the app an error occurs, then the following gets logged;

hi
xhr.js:173 GET http://holiday-assistant.localhost/api/activities/search?answers[]=1&answers[]=3 400 (Bad Request)
dispatchXhrRequest @ xhr.js:173
xhrAdapter @ xhr.js:18
dispatchRequest @ dispatchRequest.js:49
Promise.then (async)
request @ Axios.js:55
Axios.(anonymous function) @ Axios.js:65
wrap @ bind.js:11
getActivities @ activities.ts:11
(anonymous) @ apiMiddleware.ts:66
handleSubmit @ QuestionsSelector.tsx:50
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:265
executeDispatch @ react-dom.development.js:571
executeDispatchesInOrder @ react-dom.development.js:596
executeDispatchesAndRelease @ react-dom.development.js:695
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:704
forEachAccumulated @ react-dom.development.js:676
runEventsInBatch @ react-dom.development.js:844
runExtractedEventsInBatch @ react-dom.development.js:852
handleTopLevel @ react-dom.development.js:5030
batchedUpdates$1 @ react-dom.development.js:21437
batchedUpdates @ react-dom.development.js:2247
dispatchEvent @ react-dom.development.js:5110
(anonymous) @ react-dom.development.js:21494
unstable_runWithPriority @ scheduler.development.js:255
interactiveUpdates$1 @ react-dom.development.js:21493
interactiveUpdates @ react-dom.development.js:2268
dispatchInteractiveEvent @ react-dom.development.js:5086

As you can see an error has occurred and is logged properly, however Goodbye is not logged anymore.

When looking in the React debugger the component is no longer there.

Recreating the component as a class component like so;

class ActivityList extends React.Component {
  componentWillUnmount(): void {
    console.log("Goodbye");
  }

  render() {
    return <p>hi</p>
  }
}

does work; Goodbye is logged even though the above error has occurred.

Báo cáo nêu entry point cleanup của useEffect và các tệp tái hiện activities.ts, apiMiddleware.ts và QuestionsSelector.tsx; trước tiên hãy tái hiện phản hồi 400 trong khi so sánh các component dạng function và class. Không có tệp test hoặc tệp đích nào được cung cấp, vì vậy hãy xác nhận component có bị unmount hay không và xác định việc hoàn thành là thiết lập hành vi cleanup mong đợi bằng một regression test.