Patched Issue #2 setState() warning on unmount.

Author: billmalarky

lib/imageCacheHoc.js

@@ -21,6 +21,7 @@ import FileSystemFactory, { FileSystem } from '../lib/FileSystem';
 import traverse from 'traverse';
 import validator from 'validator';
 import uuid from 'react-native-uuid';
+import makeCancelable from 'makecancelable';
 
 export default function imageCacheHoc(Image, options = {}) {
 
@@ -144,12 +145,14 @@ export default function imageCacheHoc(Image, options = {}) {
       FileSystem.lockCacheFile(fileName, this.componentId);
 
       // Check local fs for file, fallback to network and write file to disk if local file not found.
+      // This must be cancelable in case component is unmounted before request completes.
       let permanent = this.props.permanent ? true : false;
 
-      this.fileSystem.getLocalFilePathFromUrl(traverse(this.props).get(['source', 'uri']), permanent)
-        .then( localFilePath => {
-          this.setState({ localFilePath });
-        });
+      this.cancelLocalFilePathRequest = makeCancelable(
+        this.fileSystem.getLocalFilePathFromUrl(traverse(this.props).get(['source', 'uri']), permanent),
+        localFilePath => this.setState({ localFilePath }),
+        error => console.error(error) // eslint-disable-line no-console
+      );
 
     }
 
@@ -159,6 +162,9 @@ export default function imageCacheHoc(Image, options = {}) {
       let fileName = this.fileSystem.getFileNameFromUrl(traverse(this.props).get(['source', 'uri']));
       FileSystem.unlockCacheFile(fileName, this.componentId);
 
+      // Cancel pending setState() actions.
+      this.cancelLocalFilePathRequest();
+
     }
 
     render() {

package.json

@@ -40,7 +40,9 @@
     "react": "^16.0.0",
     "react-native": "^0.50.1",
     "react-test-renderer": "^16.0.0",
-    "should": "^13.1.2"
+    "should": "^13.1.2",
+    "should-sinon": "^0.0.6",
+    "sinon": "^4.1.2"
   },
   "jest": {
     "preset": "react-native",
@@ -51,6 +53,7 @@
   "dependencies": {
     "buffer": "^5.0.8",
     "crypto-js": "^3.1.9-1",
+    "makecancelable": "^1.0.0",
     "path": "^0.12.7",
     "prop-types": "^15.6.0",
     "react-native-fetch-blob": "0.10.8",

tests/CacheableImage.test.js

@@ -1,12 +1,14 @@
 
 // Define globals for eslint.
-/* global describe it require */
+/* global describe it require jest */
 
 // Load dependencies
 import should from 'should'; // eslint-disable-line no-unused-vars
 import { mockData } from './mockData';
 import imageCacheHoc from '../lib/imageCacheHoc';
 import { Image } from 'react-native';
+import sinon from 'sinon';
+import 'should-sinon';
 
 describe('CacheableImage', function() {
 
@@ -260,6 +262,27 @@ describe('CacheableImage', function() {
 
   });
 
+  it('setState() actions on component mount should create cancelable functions and use on unmount.', () => {
+
+    // Set up mocks
+    const FileSystem = require('../lib/FileSystem').default;
+    FileSystem.prototype.getLocalFilePathFromUrl = jest.fn();
+    FileSystem.prototype.getLocalFilePathFromUrl.mockReturnValue(new Promise((resolve) => {
+      resolve(mockData.basePath + '/react-native-image-cache-hoc/permanent/cd7d2199cd8e088cdfd9c99fc6359666adc36289.png');
+    }));
+
+    const CacheableImage = imageCacheHoc(Image);
+    const cacheableImage = new CacheableImage(mockData.mockCacheableImageProps);
+
+    // Mount and unmount
+    cacheableImage.componentDidMount();
+    cacheableImage.cancelLocalFilePathRequest(); // Call it once manually to actually cancel local file path request
+    cacheableImage.cancelLocalFilePathRequest = sinon.spy(); // Set up a spy to make sure it gets called in componentWillUnmount().
+    cacheableImage.componentWillUnmount();
+    cacheableImage.cancelLocalFilePathRequest.should.be.calledOnce();
+
+  });
+
   it('#render with valid props does not throw an error.', () => {
 
     const CacheableImage = imageCacheHoc(Image);

yarn.lock

@@ -1450,7 +1450,7 @@ detect-indent@^4.0.0:
   dependencies:
     repeating "^2.0.0"
 
-diff@^3.2.0:
+diff@^3.1.0, diff@^3.2.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.4.0.tgz#b1d85507daf3964828de54b37d0d73ba67dda56c"
 
@@ -1884,6 +1884,12 @@ form-data@~2.3.1:
     combined-stream "^1.0.5"
     mime-types "^2.1.12"
 
+[email protected], formatio@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/formatio/-/formatio-1.2.0.tgz#f3b2167d9068c4698a8d51f4f760a39a54d818eb"
+  dependencies:
+    samsam "1.x"
+
 [email protected]:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
@@ -2832,6 +2838,10 @@ jsx-ast-utils@^2.0.0:
   dependencies:
     array-includes "^3.0.3"
 
+just-extend@^1.1.26:
+  version "1.1.27"
+  resolved "https://registry.yarnpkg.com/just-extend/-/just-extend-1.1.27.tgz#ec6e79410ff914e472652abfa0e603c03d60e905"
+
 kind-of@^3.0.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -2947,6 +2957,10 @@ lodash.escape@^3.0.0:
   dependencies:
     lodash._root "^3.0.0"
 
+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+
 lodash.isarguments@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
@@ -3012,6 +3026,14 @@ log-driver@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.5.tgz#7ae4ec257302fd790d557cb10c97100d857b0056"
 
+lolex@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/lolex/-/lolex-1.6.0.tgz#3a9a0283452a47d7439e72731b9e07d7386e49f6"
+
+lolex@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/lolex/-/lolex-2.3.0.tgz#d6bad0f0aa5caebffcfebb09fb2caa89baaff51c"
+
 longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
@@ -3033,6 +3055,10 @@ macos-release@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/macos-release/-/macos-release-1.1.0.tgz#831945e29365b470aa8724b0ab36c8f8959d10fb"
 
+makecancelable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/makecancelable/-/makecancelable-1.0.0.tgz#c7e2606e59db7a4bf8098ff5b52d7f13173499e5"
+
 [email protected]:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c"
@@ -3243,6 +3269,16 @@ [email protected]:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
 
+nise@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/nise/-/nise-1.2.0.tgz#079d6cadbbcb12ba30e38f1c999f36ad4d6baa53"
+  dependencies:
+    formatio "^1.2.0"
+    just-extend "^1.1.26"
+    lolex "^1.6.0"
+    path-to-regexp "^1.7.0"
+    text-encoding "^0.6.4"
+
 node-fetch@^1.0.1, node-fetch@^1.3.3:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
@@ -3501,6 +3537,12 @@ path-parse@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
 
+path-to-regexp@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -4063,6 +4105,10 @@ safe-buffer@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.0.1.tgz#d263ca54696cd8a306b5ca6551e92de57918fbe7"
 
+[email protected]:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.3.0.tgz#8d1d9350e25622da30de3e44ba692b5221ab7c50"
+
 sane@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/sane/-/sane-2.2.0.tgz#d6d2e2fcab00e3d283c93b912b7c3a20846f1d56"
@@ -4179,6 +4225,10 @@ should-format@^3.0.3:
     should-type "^1.3.0"
     should-type-adaptors "^1.0.1"
 
+should-sinon@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/should-sinon/-/should-sinon-0.0.6.tgz#be041a7c928f44ac9ccf5dc042d032618ce29f84"
+
 should-type-adaptors@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/should-type-adaptors/-/should-type-adaptors-1.0.1.tgz#efe5553cdf68cff66e5c5f51b712dc351c77beaa"
@@ -4216,6 +4266,18 @@ simple-plist@^0.2.1:
     bplist-parser "0.1.1"
     plist "2.0.1"
 
+sinon@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/sinon/-/sinon-4.1.2.tgz#65610521d926fb53742dd84cd599f0b89a82f440"
+  dependencies:
+    diff "^3.1.0"
+    formatio "1.2.0"
+    lodash.get "^4.4.2"
+    lolex "^2.2.0"
+    nise "^1.2.0"
+    supports-color "^4.4.0"
+    type-detect "^4.0.0"
+
 slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
@@ -4396,7 +4458,7 @@ supports-color@^3.1.2:
   dependencies:
     has-flag "^1.0.0"
 
-supports-color@^4.0.0:
+supports-color@^4.0.0, supports-color@^4.4.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
   dependencies:
@@ -4459,6 +4521,10 @@ test-exclude@^4.1.1:
     read-pkg-up "^1.0.1"
     require-main-filename "^1.0.1"
 
+text-encoding@^0.6.4:
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/text-encoding/-/text-encoding-0.6.4.tgz#e399a982257a276dae428bb92845cb71bdc26d19"
+
 text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -4542,6 +4608,10 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
+type-detect@^4.0.0:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.5.tgz#d70e5bc81db6de2a381bcaca0c6e0cbdc7635de2"
+
 type-is@~1.6.6:
   version "1.6.15"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.15.tgz#cab10fb4909e441c82842eafe1ad646c81804410"