Enable useExhaustiveDependencies

biome.json

@@ -29,9 +29,7 @@
       },
       "correctness": {
         "noVoidTypeReturn": "off",
-        "useJsxKeyInIterable": "off",
-
-        "useExhaustiveDependencies": "off"
+        "useJsxKeyInIterable": "off"
       },
       "performance": {
         "noAccumulatingSpread": "off"

packages/lake/src/components/Breadcrumbs.tsx

@@ -201,6 +201,7 @@ export const BreadcrumbsRoot = ({ rootLevelCrumbs = emptyCrumbArray, children }:
     [crumbs],
   );
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies:
   const value = useMemo(
     () => [rootCrumbs, orderedCrumbs, setCrumbs, currentIndexRef] as const,
     [rootCrumbs, orderedCrumbs, setCrumbs, currentIndexRef],

packages/lake/src/components/Cells.tsx

@@ -14,7 +14,6 @@ import { LakeTooltip } from "./LakeTooltip";
 import { Pressable } from "./Pressable";
 import { Space } from "./Space";
 
-/* eslint-disable react-native/no-unused-styles */
 const directionStyles = StyleSheet.create({
   column: { flexDirection: "column" },
   row: { flexDirection: "row" },
@@ -31,7 +30,6 @@ const justifyContentStyles = StyleSheet.create({
   center: { justifyContent: "center" },
   right: { justifyContent: "flex-end" },
 });
-/* eslint-enable react-native/no-unused-styles */
 
 const fadeOnLeftMask = `linear-gradient(to right, ${invariantColors.transparent}, ${invariantColors.black} ${spacings[8]})`;
 const fadeOnRightMask = `linear-gradient(to left, ${invariantColors.transparent}, ${invariantColors.black} ${spacings[8]})`;

packages/lake/src/components/FlatList.tsx

@@ -66,6 +66,7 @@ const FlatListWithRef = <T,>(
     ? { top: 0, width: onEndReachedThresholdPx }
     : { left: 0, height: onEndReachedThresholdPx };
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies:
   useEffect(() => {
     const element = scrollTrackerRef.current as unknown as HTMLElement;
 
@@ -85,7 +86,7 @@ const FlatListWithRef = <T,>(
       };
     }
     // re-create an observer only on list length change
-  }, [data.length]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [data.length]);
 
   return (
     <ScrollView

packages/lake/src/components/LakeCheckbox.tsx

@@ -54,6 +54,7 @@ export const LakeCheckbox = ({
   const isFirstRender = useRef(true);
   const [shouldAnimate, setShouldAnimate] = useState(false);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies:
   useEffect(() => {
     if (!isFirstRender.current) {
       setShouldAnimate(true);

packages/lake/src/components/LakeTooltip.tsx

@@ -132,6 +132,7 @@ const Tooltip = memo(
         },
       });
 
+      // biome-ignore lint/correctness/useExhaustiveDependencies:
       useEffect(() => {
         const node = referenceRef.current;
 

packages/lake/src/components/MultiSelect.tsx

@@ -203,6 +203,7 @@ export const MultiSelect = <Value,>({
     }
   }, [visible]);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies:
   useEffect(() => {
     if (shouldScrollToBottomRef.current) {
       const top = selectedTagListRef.current?.scrollHeight;

packages/lake/src/components/Pressable.tsx

@@ -70,7 +70,7 @@ type Props<BaseProps extends TextProps | TextInputProps> = Merge<
 >;
 
 const getPressable = <P extends Props<TextProps | TextInputProps>>(
-  // biome-ignore lint/suspicious/noExplicitAny: required
+  // biome-ignore lint/suspicious/noExplicitAny:
   Component: ComponentType<any>,
   config: { applyPressStyle?: boolean } = {},
 ) => {
@@ -150,6 +150,7 @@ const getPressable = <P extends Props<TextProps | TextInputProps>>(
 
     const interactionState = { hovered, focused, pressed };
 
+    // biome-ignore lint/correctness/useExhaustiveDependencies:
     const blurHandler = useCallback(
       (e: NativeSyntheticEvent<React.FocusEvent>) => {
         if (e.nativeEvent.target === hostRef.current) {
@@ -160,6 +161,7 @@ const getPressable = <P extends Props<TextProps | TextInputProps>>(
       [hostRef, setFocused, onBlur],
     );
 
+    // biome-ignore lint/correctness/useExhaustiveDependencies:
     const focusHandler = useCallback(
       (e: NativeSyntheticEvent<React.FocusEvent>) => {
         if (e.nativeEvent.target === hostRef.current) {

packages/lake/src/components/SectionList.tsx

@@ -70,6 +70,7 @@ const SectionListWithRef = <T,>(
     ? { top: 0, width: onEndReachedThresholdPx }
     : { left: 0, height: onEndReachedThresholdPx };
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies:
   useEffect(() => {
     const element = scrollTrackerRef.current as unknown as HTMLElement;
 
@@ -89,7 +90,7 @@ const SectionListWithRef = <T,>(
       };
     }
     // re-create an observer only on list length change
-  }, [sections.length]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [sections.length]);
 
   return (
     <ScrollView

packages/lake/src/components/TabView.tsx

@@ -528,6 +528,7 @@ export const TabView = ({
   const { path } = location;
   const currentLocationURL = location.toString();
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies:
   useEffect(() => {
     if (isNotNullish(linksRefs.current)) {
       const values = Object.entries(linksRefs.current);

packages/lake/src/components/Toggle.tsx

@@ -78,6 +78,7 @@ export const Toggle = ({
     );
   }, [value]);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies:
   useEffect(reajustLayout, [reajustLayout, value, isMobileMode, onLabel, offLabel]);
 
   return (

packages/lake/src/components/VirtualizedList.tsx

@@ -416,6 +416,7 @@ export const VirtualizedList = <T, ExtraInfo>({
   }, [onLayoutUpdate]);
 
   // tracks if the threshold to initiate the next data load is reached
+  // biome-ignore lint/correctness/useExhaustiveDependencies:
   useEffect(() => {
     const scrollTracker = scrollTrackerRef.current;
     if (scrollTracker != null) {

packages/lake/src/hooks/useUpdateEffect.ts

@@ -4,9 +4,10 @@ import { useFirstMountState } from "./useFirstMountState";
 export const useUpdateEffect: typeof useEffect = (effect, deps) => {
   const isFirstMount = useFirstMountState();
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies:
   useEffect(() => {
     if (!isFirstMount) {
       return effect();
     }
-  }, deps); // eslint-disable-line react-hooks/exhaustive-deps
+  }, deps);
 };

packages/shared-business/src/components/ChoicePicker.tsx

@@ -130,6 +130,7 @@ export const ChoicePicker = <T,>({
   const { desktop } = useResponsive(breakpoints.medium);
   const [mobilePosition, setMobilePosition] = useState<"start" | "middle" | "end">("start");
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies:
   useEffect(() => {
     if (desktop) {
       return;
@@ -152,7 +153,7 @@ export const ChoicePicker = <T,>({
       onChange(items[0]);
     }
     // disable exhaustive-deps because we only want to run this effect only when screen size go from desktop to mobile
-  }, [desktop]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [desktop]);
 
   const onScroll = () => {
     // prevent scroll event when we change screen size from mobile to desktop

packages/shared-business/src/components/SupportChat.tsx

@@ -43,6 +43,7 @@ declare function zE(
 const [zendeskApi, setZendeskApi] = Deferred.make();
 
 export const SupportChat = ({ children, accentColor, type, additionalInfo }: Props) => {
+  // biome-ignore lint/correctness/useExhaustiveDependencies:
   useEffect(() => {
     const script = document.createElement("script");
     script.id = "ze-snippet";
@@ -68,6 +69,7 @@ export const SupportChat = ({ children, accentColor, type, additionalInfo }: Pro
     };
   }, [accentColor]);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies:
   useEffect(() => {
     const { firstName, lastName, email, projectName, ...fieldInfos } = additionalInfo;
     const values = Dict.entries({ ...fieldInfos, email });
@@ -109,6 +111,7 @@ export const SupportChat = ({ children, accentColor, type, additionalInfo }: Pro
     });
   }, [accentColor, additionalInfo]);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies:
   const onPressShow = useCallback(() => {
     try {
       zE("webWidget", "show");