From f45789bfb8ada09d2c00d41fc45e40b5e36b8590 Mon Sep 17 00:00:00 2001
From: bokuweb <bokuweb12@gmail.com>
Date: Mon, 12 Aug 2019 22:32:45 +0900
Subject: [PATCH 1/2] fix: Remove willRecieveProps

---
 src/index.tsx | 31 +++++++++++--------------------
 1 file changed, 11 insertions(+), 20 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 139465683..9ae0b6da6 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -346,7 +346,6 @@ export class Resizable extends React.Component<ResizableProps, State> {
   };
   public ratio = 1;
   public resizable: HTMLDivElement | null = null;
-  public extendsProps: { [key: string]: React.HTMLProps<'div'> } = {};
   // For parent boundary
   public parentLeft = 0;
   public parentTop = 0;
@@ -379,7 +378,6 @@ export class Resizable extends React.Component<ResizableProps, State> {
       },
     };
 
-    this.updateExtendsProps(props);
     this.onResizeStart = this.onResizeStart.bind(this);
     this.onMouseMove = this.onMouseMove.bind(this);
     this.onMouseUp = this.onMouseUp.bind(this);
@@ -393,19 +391,6 @@ export class Resizable extends React.Component<ResizableProps, State> {
     }
   }
 
-  public updateExtendsProps(props: ResizableProps) {
-    this.extendsProps = Object.keys(props).reduce(
-      (acc, key) => {
-        if (definedProps.indexOf(key) !== -1) {
-          return acc;
-        }
-        acc[key] = props[key as keyof ResizableProps];
-        return acc;
-      },
-      {} as { [key: string]: any },
-    );
-  }
-
   public getParentSize(): { width: number; height: number } {
     if (!this.base || !this.parentNode) {
       return { width: window.innerWidth, height: window.innerHeight };
@@ -460,10 +445,6 @@ export class Resizable extends React.Component<ResizableProps, State> {
     parent.appendChild(element);
   }
 
-  public componentWillReceiveProps(next: ResizableProps) {
-    this.updateExtendsProps(next);
-  }
-
   public componentWillUnmount() {
     if (typeof window !== 'undefined') {
       window.removeEventListener('mouseup', this.onMouseUp);
@@ -808,6 +789,16 @@ export class Resizable extends React.Component<ResizableProps, State> {
   }
 
   public render() {
+    const extendsProps = Object.keys(this.props).reduce(
+      (acc, key) => {
+        if (definedProps.indexOf(key) !== -1) {
+          return acc;
+        }
+        acc[key] = this.props[key as keyof ResizableProps];
+        return acc;
+      },
+      {} as { [key: string]: any },
+    );
     return (
       <div
         ref={c => {
@@ -827,7 +818,7 @@ export class Resizable extends React.Component<ResizableProps, State> {
           boxSizing: 'border-box',
         }}
         className={this.props.className}
-        {...this.extendsProps}
+        {...extendsProps}
       >
         {this.state.isResizing && (
           <div

From 23a94ae6a269471925efe204c7848ea997ddbc26 Mon Sep 17 00:00:00 2001
From: bokuweb <bokuweb12@gmail.com>
Date: Mon, 12 Aug 2019 22:34:01 +0900
Subject: [PATCH 2/2] feat: use pure

---
 src/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.tsx b/src/index.tsx
index 9ae0b6da6..d2e2909bd 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -244,7 +244,7 @@ interface NewSize {
   newHeight: number | string;
   newWidth: number | string;
 }
-export class Resizable extends React.Component<ResizableProps, State> {
+export class Resizable extends React.PureComponent<ResizableProps, State> {
   get parentNode(): HTMLElement | null {
     if (!this.resizable) {
       return null;