SvgUri can set state after unmount

[kjossendal]

Using v: 12.1.0
RN: 0.6.6.0

Essentially this part defining SvgUri can attempt to set state after the component has unmounted which will throw memory leak warnings with a call to setXml. Maybe need a mount safe setState hook?

export function SvgUri(props: UriProps) {
  const { onError = err, uri } = props;
  const [xml, setXml] = useState<string | null>(null);
  useEffect(() => {
    uri
      ? fetchText(uri)
          .then(setXml)
          .catch(onError)
      : setXml(null);
  }, [onError, uri]);
  return <SvgXml xml={xml} override={props} />;
}

[kjossendal]

So far, patching with something like this works well for my case. fetchText is also used in conjunction with a setState call in the SvgFromUri class so this is just a temporary fix.

export function SvgUri(props: UriProps) {
  const { onError = err, uri } = props;
  const [xml, setXml] = useState<string | null>(null);
  useEffect(() => {
    let isMounted = true;
    uri
      ? fetchText(uri)
          .then((resp) => {
            if (isMounted) {
              setXml(resp)
            }
          })
          .catch(onError)
      : setXml(null);
      return () => {
        isMounted = false
      }
  }, [onError, uri]);
  return <SvgXml xml={xml} override={props} />;
}

[lyqht]

getting the error too with a component like this

<IconButton
  icon={
      <Icon
          as={
              <SvgUri
                  width="48"
                  height="48"
                  uri={
                      "https://api.iconify.design/icon-park-outline:tea-drink.svg"
                  }
              />
          }
      />
  } 
/>

 ERROR  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.
    in SvgUri (at HomeScreen.tsx:48)

[ansmlc]

getting the error too with a component like this

<IconButton
  icon={
      <Icon
          as={
              <SvgUri
                  width="48"
                  height="48"
                  uri={
                      "https://api.iconify.design/icon-park-outline:tea-drink.svg"
                  }
              />
          }
      />
  } 
/>

 ERROR  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.
    in SvgUri (at HomeScreen.tsx:48)

Same here. But the error didn't say where, took forever to pinpoint it to SvgUri.

[lyqht]

any updates on this?

[atlj]

import React, { useEffect, useState } from 'react';
import { UriProps, SvgXml } from 'react-native-svg';

export function SvgUri(props: UriProps) {
  const [xml, setXml] = useState<null | string>(null);

  useEffect(
    function fetchXml() {
      const fetchController = new AbortController();

      if (props.uri !== null)
        fetch(props.uri, { signal: fetchController.signal })
          .then((response) => response.text())
          .then(setXml);

      return () => fetchController.abort();
    },
    [props.uri]
  );
  return <SvgXml xml={xml} override={props} />;
}

here is a solution derived from @Balintataw's

[bohdanprog]

Hello,
Could you please provide a straightforward way to replicate how I can receive that warning?
Thank you.