Merge pull request #95 from Detaysoft/leak-fix

Memory leak fix

Author: abdurrahmanekr

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "10.4.2",
+  "version": "10.4.3",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
   "main": "dist/main.js",

src/Avatar/Avatar.js

@@ -12,6 +12,14 @@ export class Avatar extends Component {
         this.requestImage = this.requestImage.bind(this);
     }
 
+    componentDidMount() {
+        this._isMounted = true;
+    }
+
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+
     isLoaded(src) {
         return loadedAvatars.indexOf(src) !== -1;
     }
@@ -23,7 +31,9 @@ export class Avatar extends Component {
         var loaded = () => {
             loadedAvatars.push(src);
             delete self.loading;
-            self.setState({});
+            if (this._isMounted !== false) {
+                self.setState({});
+            }
         };
 
         var img = document.createElement('img');
@@ -33,8 +43,8 @@ export class Avatar extends Component {
     }
 
     render() {
-        var src = this.props.src;
-        var isLazyImage = false;
+        let src = this.props.src;
+        let isLazyImage = false;
 
         if (this.props.lazyLoadingImage) {
             isLazyImage = true;

src/MessageList/MessageList.js

@@ -15,6 +15,9 @@ export class MessageList extends Component {
             scrollBottom: 0,
             downButton: false,
         };
+
+        this.loadRef = this.loadRef.bind(this);
+        this.onScroll = this.onScroll.bind(this);
     }
 
     checkScroll() {
@@ -120,8 +123,8 @@ export class MessageList extends Component {
             <div
                 className={classNames(['rce-container-mlist', this.props.className])}>
                 <div
-                    ref={this.loadRef.bind(this)}
-                    onScroll={this.onScroll.bind(this)}
+                    ref={this.loadRef}
+                    onScroll={this.onScroll}
                     className='rce-mlist'>
                     {
                         this.props.dataSource.map((x, i) => (