fix: stringify array thresholds (#404)

This fixes ensures Array thresholds are converted to a string when passed to the useCallback dependency array. This prevents infinite rerenders caused by arrays being recreated every render.

Author: thebuilder

package.json

@@ -174,13 +174,13 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
     "prettier-plugin-pkg": "^0.8.0",
-    "react": "^17.0.0-rc.1",
-    "react-dom": "^17.0.0-rc.1",
+    "react": "^17.0.0-rc.3",
+    "react-dom": "^17.0.0-rc.3",
     "react-test-renderer": "^17.0.0-rc.1",
     "typescript": "^4.0.2"
   },
   "resolutions": {
-    "react": "17.0.0-rc.1",
-    "react-dom": "17.0.0-rc.1"
+    "react": "17.0.0-rc.3",
+    "react-dom": "17.0.0-rc.3"
   }
 }

src/__tests__/hooks.test.tsx

@@ -42,6 +42,16 @@ test('should create a hook', () => {
   expect(instance.observe).toHaveBeenCalledWith(wrapper);
 });
 
+test('should create a hook with array threshold', () => {
+  const { getByTestId } = render(
+    <HookComponent options={{ threshold: [0.1, 1] }} />,
+  );
+  const wrapper = getByTestId('wrapper');
+  const instance = intersectionMockInstance(wrapper);
+
+  expect(instance.observe).toHaveBeenCalledWith(wrapper);
+});
+
 test('should create a lazy hook', () => {
   const { getByTestId } = render(<LazyHookComponent />);
   const wrapper = getByTestId('wrapper');

src/useInView.tsx

@@ -57,7 +57,19 @@ export function useInView({
         );
       }
     },
-    [threshold, root, rootMargin, triggerOnce, skip, trackVisibility, delay],
+    // We break the rule here, because we aren't including the actual `threshold` variable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      // If the threshold is an array, convert it to a string so it won't change between renders.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      Array.isArray(threshold) ? threshold.toString() : threshold,
+      root,
+      rootMargin,
+      triggerOnce,
+      skip,
+      trackVisibility,
+      delay,
+    ],
   );
 
   /* eslint-disable-next-line */