Did you ever got the following error?
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memor...
For further actions, you may consider blocking this person and/or reporting abuse
I am just coming from the react docs trying to figure this out I couldn't get their explanation but this!!! Well explained, came across the same error now i understand why and Ik how to fix it. Thank you!
Happy to help!
Thanks for the solution on Axios request.
I have a question.
I'm using an instance of Axios and in this instance, you cant be able to use
instanceAxios.CancelToken.source()so I gotta import Axios too.is there another way to use
CancelToken.source()in the instance of Axios likeinstanceAxios.CancelToken.source()?As far as I know axios by design,
cancelTokenwon't be part of the instance. You may be able to do something similar to this.Thanks a bunch, that cleared things up! Time to add some
let mounted=...to my effects..Many thanks, this was really helpful! I got this error "Warning: An update to SomeComponent inside a test was not wrapped in act(...)." when running my tests. Took me a while to figure out this was coming from a fetch() call in a useEffect() method that was updating some state. Applied the "only update state when mounted" fix you suggested and that solved it.
Thanks for the solution on axios request.
I had thought of looking into the warning before, but kept procrastinating it. Now I just need to go and apply the fix :)
Glad it was helpful for you
hii here i'm not performing any async operation event though i'm still getting warnings with cleanup function when i'm routing to another page. Please can you suggest me any solution.
export default function useOnScreen(ref, rootMargin = "0px") {
const [isVisible, setIsVisible] = useState(false)
useEffect(() => {
let setRef=null;
if (ref.current === null) return
const observer = new IntersectionObserver(
([entry]) => setIsVisible(entry.isIntersecting),
{ rootMargin }
)
observer.observe(ref.current)
setRef=ref
return () => {
if (setRef.current) {
observer.unobserve(setRef.current)
}
}
}, [ref, rootMargin])
return isVisible
}
Thank you very much! 😀👍
awesome !!...very well explained
Very nice simple and clear explanation. Was trying to figure it out in the react docs but this made my day. ✌️
Happy to help!
Thanks, this helped me.
there migh be fetchUsers() instead of fetchData() in axios abort code.
Thank you for the great content !!
Excellent
Thank you this was unbelievable!
Thanks! It is very well written. Even novices like me could understand it fully.
Thanks Man! This is quite helpful.
Thanks, nice article.
What about putting setloading(true) in the return function?
ex.
return function cleanup() {
setloading(true);
}
Would it differ from mounted = false? and why?
Thank you in advance.
the axios thing helped me out a lot thats really cool thank you.
let mounted....... is awesome :)
Thank you, it solves my clean up definition issue :)
Thanks for details.
Nice explanation, thnks
In the last eample (Extra: Cancel an Axios request)
There is a typo: Before the cleanup function, it should be "fetchUsers()" instead "fetchData()"
Good article, tho! Thanks!
Thank you!! Thanks to this article I finally understand what this is about and what the use case could be. Saludos!
In the last axios example, shouldn't the method call be fetchUsers() and not fetchData()?
yes. it should be fetchUsers()
prefect
I use useEffect to call a function which calls the api via axios only on the initial render. I don’t get any errors, do I still need to unsubscribe and do all this?
Noice