How to cancel SvgUri request when component will unmount

Question

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

My component is:

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, Text } from 'react-native';
import { SvgUri } from 'react-native-svg';
import * as Colors from '../../config/colors';
import { STATIC_CONTENT_URL } from '../../config/apis';

export default function Categories({
  category, active
}) {

  useEffect(() => {
    console.log('useEffect on Categories component');

    return function cleanup() {
      // cancel or unsubscribe
    }
  })

  return (
    <View style={{...styles.container, backgroundColor: active === category.id ? Colors.BG_PRIMARY_SHADE_ACTIVE : Colors.BG_WHITE}}>
      <View style={styles.imgContainer}>
        <SvgUri
          width="100%"
          height="100%"
          uri={`${STATIC_CONTENT_URL}/static/assets/css/images/${category.img}.svg`}
        />
      </View>
      <Text style={styles.categoryName}>{category.name}</Text>
    </View>
  )
}

Categories.propTypes = {
  category: PropTypes.object,
  active: PropTypes.string
}

const styles = StyleSheet.create({
  container: {
    width: 90,
    height: 90,
    borderRadius: 4,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 10,
    padding: 10,
  },
  imgContainer: {
    width: 70,
    height: 30,
    paddingBottom: 2,
  },
  categoryName: {
    fontSize: 9,
    color: Colors.TEXT_COLOR_SOFT,
    textAlign: "center",
  }
})

Version:

"react-native": "0.61.5",
"react-native-svg": "^12.0.3"

All of svg files are static files and it load from the server & I don't want to import directly.

Hmm, are you sure the issue is related to SVGUri? According to its source, the component should handle unmounting properly (https://github.com/vault-development/react-native-svg-uri/blob/c6841a6e7d1a6ee5cf5b515d4faea6002e166f3c/index.js#L137)... — Dmitriy Mozgovoy, Jan 04 '21 at 13:28
Here about `react-native-svg` module, not `react-native-svg-uri` module — Ikram Ud Daula, Jan 04 '21 at 18:01
@ßiansorÅ.Ålmerol, I use `rn-fetch-blob` & `react-native-base64` module & xml property from`{ SvgCss } from 'react-native-svg'` to solve this. — Ikram Ud Daula, Jun 17 '21 at 13:00

score 0 · Answer 1 · answered Jan 04 '21 at 08:13

0

Use react-native-svg-transformer to transform your imported SVG images into React components ... Then you could import your svg-file in a react component

import YourSvgFile from './YourSvgFile.svg';

<YourSvgFile />

answered Jan 04 '21 at 08:13

Hend El-Sahli

6,268
2
25
42

all of static files but it load from different server. I don't want to import directly. – Ikram Ud Daula Jan 04 '21 at 08:16
Since your svg-files are remote ... loading these files are subject to failure ... why not you pre-load and cache your target file before rendering – Hend El-Sahli Jan 04 '21 at 08:29
It's a good approach to pre-load and cache these files. but `react-native-svg` does have any preload features? – Ikram Ud Daula Jan 04 '21 at 08:35
1

I believe that **loading of this remote svg-file** is an async-task ... and react-native-SVG doesn't give the ability to cancel it ... bu my suggested solution of preloading-SVG-file could be achieved using a different library like react-native-fs, or Expo > FileSystem buildin module ... or rn-fetch-blob – Hend El-Sahli Jan 04 '21 at 08:52
`rn-fetch-blob` getting job done. it has cancellation function but it very slower than `react-native-svg` SvgUri fetch. – Ikram Ud Daula Jan 04 '21 at 11:29
I guess it depends on your internet-connection-speed and the size of the file - besides this delay wwill for the first time you load and cache the file ... any subsequent rendering should be very smooth (by loading the cached file directly)... – Hend El-Sahli Jan 04 '21 at 12:04

How to cancel SvgUri request when component will unmount

1 Answers1