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

user_17940517 0
Viewed 1727

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]);
setstate expo use-effect react-native javascript
2 Answers
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.

user_56628050

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).

user_138970650
Related