In the React documentation for hooks they say:
\"This also allows you to handle out-of-order responses with a local variable inside the effect\"
we use a boolean flag called ignore
to let our data fetching logic know about the state (mounted/unmounted) of the component.If the component did unmount, the flag should be set to true which results in preventing to set the component state after the data fetching has been asynchronously resolved eventually. when component unmounted then return (second part of useEffect) is called. but in this case because of dependency [query] when query change, our component is re-rendered, so sideEffect is re-initialized. Run this code on your IDE then open Devtools in your browser like chrome and clear console then in input which the word react is written, add char 2 as fast as possible and then immediately remove char 2. check console to see what happened.