CODEWITHSUNDEEP
javascriptreact-nativeexpouse-effectsetstate
delle
delle

Reputation: 253

Fix Can't perform a react state update on an unmounted component React native

how can I fix this error in my react native, see the code below.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

   const getData = () => {
        setIsLoading(true)
        axios.get(hosturl.loaduser + userlist.user_id + '&page=' +currentPage)
        .then((response) => {
            setEvent([...userData, ...response.data.data])
            setIsLoading(false)
        })
    }
  
    useEffect(() => {    
        getData();
    }, [currentPage]);

I did something like this see below but error keep showing.

useEffect(() => {   
    let isMounted = true;    
    if (isMounted) getData();    
    return () => { isMounted = false }; 
}, [currentPage]);

Upvotes: 3

Views: 5159

Answers (2)

wuarmin
wuarmin

Reputation: 4015

function MyComponent() {
    const mounted = useRef(false);

    const getData = () => {
      setIsLoading(true)
      axios.get(hosturl.loaduser + userlist.user_id + '&page=' +currentPage)
        .then((response) => {
          if (mounted.current) {
            setEvent([...userData, ...response.data.data])
            setIsLoading(false)
          }
        })
     }

    useEffect(() => {
        mounted.current = true;
        return () => {
            mounted.current = false;
        };
    }, []);

    useEffect(() => {     
      if (mounted.current) {
        getData();    
      }
    }, [currentPage]);

    return (
        ...
    );
}

The useEffect() hook, which should handle the mounted ref, is called when the component is mounted and sets the mutable mounted.current value to true. The return function from the useEffect() hook is called when the component is unmounted and sets the mounted.current value to false.

After that you can use the mounted ref (it's like a member variable in old style class components). I.e to get your data, only if your component is mounted, or set state in callback, only if component is mounted.

Upvotes: 1

Giovanni Esposito
Giovanni Esposito

Reputation: 11156

You could use axios Cancellation:

const controller = new AbortController();

const getData = () => {
   setIsLoading(true)
   axios.get(hosturl.loaduser + userlist.user_id + '&page=' +currentPage, {
    signal: controller.signal
   }).then((response) => {
       setEvent([...userData, ...response.data.data])
       setIsLoading(false)
    })
}
  
 useEffect(() => {    
    getData();
    
    return () => {
        controller.abort();
    };
 }, [currentPage]);

In this way you are aborting axios get on component unmount, avoiding setEvent and setIsLoading (and then the warning).

Upvotes: 1

Related Questions