SvgUri can set state after unmount

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} />;
}

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

[Balintataw]

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} />;
}