r3tr0c0d3r / rn-slide-button

Slide Button (Swipe Button) component for react native
MIT License
13 stars 16 forks source link

Can't perform a React state update on an unmounted component #2

Closed DDexster closed 2 years ago

DDexster commented 2 years ago

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch rn-slide-button@1.0.2 for the project I'm working on.

On some screens, there is an 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 %s.%s, a useEffect cleanup function, in SlideButton at node_modules/rn-slide-button/src/components/SlideButton.tsx:192:19 in handleComplete

it is caused by not clearing setTmeout on unmount

Here is the diff that solved my problem:

```diff
diff --git a/node_modules/rn-slide-button/src/components/SlideButton.tsx b/node_modules/rn-slide-button/src/components/SlideButton.tsx
index 0fcd9f1..d17a034 100644
--- a/node_modules/rn-slide-button/src/components/SlideButton.tsx
+++ b/node_modules/rn-slide-button/src/components/SlideButton.tsx
@@ -109,6 +109,7 @@ const SlideButton = ({
 }: SlideButtonProps) => {
   const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
   const [endReached, setEndReached] = React.useState<boolean>(false);
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>();

   const gestureDisabled = useSharedValue(disabled);
   const dragX = useSharedValue(0);
@@ -149,6 +150,12 @@ const SlideButton = ({
     }
   };

+  React.useEffect(() => {
+    return () => {
+      clearTimeout(timeoutRef.current)
+    };
+  }, []);
+
   React.useEffect(() => {
     gestureDisabled.value = disabled;
   }, [disabled]);
@@ -180,7 +187,7 @@ const SlideButton = ({
       if (!dynamicResetEnabled) {
         if (autoReset) {
           gestureDisabled.value = true;
-          setTimeout(() => {
+          timeoutRef.current = setTimeout(() => {
             reset();
           }, autoResetDelay);
         }

This issue body was partially generated by patch-package.

r3tr0c0d3r commented 2 years ago

@DDexster the issue is solved according to your solution