From 42de80262ba52860d25205e3c5248e2a35f0846e Mon Sep 17 00:00:00 2001 From: Mathieu Acthernoene Date: Thu, 9 Jan 2025 18:16:32 +0100 Subject: [PATCH] Enable useExhaustiveDependencies --- biome.json | 4 +--- packages/lake/src/components/Breadcrumbs.tsx | 1 + packages/lake/src/components/Cells.tsx | 2 -- packages/lake/src/components/FlatList.tsx | 3 ++- packages/lake/src/components/LakeCheckbox.tsx | 1 + packages/lake/src/components/LakeTooltip.tsx | 1 + packages/lake/src/components/MultiSelect.tsx | 1 + packages/lake/src/components/Pressable.tsx | 4 +++- packages/lake/src/components/SectionList.tsx | 3 ++- packages/lake/src/components/TabView.tsx | 1 + packages/lake/src/components/Toggle.tsx | 1 + packages/lake/src/components/VirtualizedList.tsx | 1 + packages/lake/src/hooks/useUpdateEffect.ts | 3 ++- packages/shared-business/src/components/ChoicePicker.tsx | 3 ++- packages/shared-business/src/components/SupportChat.tsx | 3 +++ 15 files changed, 22 insertions(+), 10 deletions(-) diff --git a/biome.json b/biome.json index fccffebc6..4c5c0dc5f 100644 --- a/biome.json +++ b/biome.json @@ -29,9 +29,7 @@ }, "correctness": { "noVoidTypeReturn": "off", - "useJsxKeyInIterable": "off", - - "useExhaustiveDependencies": "off" + "useJsxKeyInIterable": "off" }, "performance": { "noAccumulatingSpread": "off" diff --git a/packages/lake/src/components/Breadcrumbs.tsx b/packages/lake/src/components/Breadcrumbs.tsx index d792a148c..e07665c94 100644 --- a/packages/lake/src/components/Breadcrumbs.tsx +++ b/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], diff --git a/packages/lake/src/components/Cells.tsx b/packages/lake/src/components/Cells.tsx index f98b3aa9b..9b5fc3a87 100644 --- a/packages/lake/src/components/Cells.tsx +++ b/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]})`; diff --git a/packages/lake/src/components/FlatList.tsx b/packages/lake/src/components/FlatList.tsx index d3114093a..e314a4155 100644 --- a/packages/lake/src/components/FlatList.tsx +++ b/packages/lake/src/components/FlatList.tsx @@ -66,6 +66,7 @@ const FlatListWithRef = ( ? { 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 = ( }; } // re-create an observer only on list length change - }, [data.length]); // eslint-disable-line react-hooks/exhaustive-deps + }, [data.length]); return ( { if (!isFirstRender.current) { setShouldAnimate(true); diff --git a/packages/lake/src/components/LakeTooltip.tsx b/packages/lake/src/components/LakeTooltip.tsx index 192519710..b0c069ed3 100644 --- a/packages/lake/src/components/LakeTooltip.tsx +++ b/packages/lake/src/components/LakeTooltip.tsx @@ -132,6 +132,7 @@ const Tooltip = memo( }, }); + // biome-ignore lint/correctness/useExhaustiveDependencies: useEffect(() => { const node = referenceRef.current; diff --git a/packages/lake/src/components/MultiSelect.tsx b/packages/lake/src/components/MultiSelect.tsx index 3f4147090..6aa7e0bcf 100644 --- a/packages/lake/src/components/MultiSelect.tsx +++ b/packages/lake/src/components/MultiSelect.tsx @@ -203,6 +203,7 @@ export const MultiSelect = ({ } }, [visible]); + // biome-ignore lint/correctness/useExhaustiveDependencies: useEffect(() => { if (shouldScrollToBottomRef.current) { const top = selectedTagListRef.current?.scrollHeight; diff --git a/packages/lake/src/components/Pressable.tsx b/packages/lake/src/components/Pressable.tsx index 04dcde330..6c6868b0b 100644 --- a/packages/lake/src/components/Pressable.tsx +++ b/packages/lake/src/components/Pressable.tsx @@ -70,7 +70,7 @@ type Props = Merge< >; const getPressable =

>( - // biome-ignore lint/suspicious/noExplicitAny: required + // biome-ignore lint/suspicious/noExplicitAny: Component: ComponentType, config: { applyPressStyle?: boolean } = {}, ) => { @@ -150,6 +150,7 @@ const getPressable =

>( const interactionState = { hovered, focused, pressed }; + // biome-ignore lint/correctness/useExhaustiveDependencies: const blurHandler = useCallback( (e: NativeSyntheticEvent) => { if (e.nativeEvent.target === hostRef.current) { @@ -160,6 +161,7 @@ const getPressable =

>( [hostRef, setFocused, onBlur], ); + // biome-ignore lint/correctness/useExhaustiveDependencies: const focusHandler = useCallback( (e: NativeSyntheticEvent) => { if (e.nativeEvent.target === hostRef.current) { diff --git a/packages/lake/src/components/SectionList.tsx b/packages/lake/src/components/SectionList.tsx index cb56d9908..348b93e5e 100644 --- a/packages/lake/src/components/SectionList.tsx +++ b/packages/lake/src/components/SectionList.tsx @@ -70,6 +70,7 @@ const SectionListWithRef = ( ? { 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 = ( }; } // re-create an observer only on list length change - }, [sections.length]); // eslint-disable-line react-hooks/exhaustive-deps + }, [sections.length]); return ( { if (isNotNullish(linksRefs.current)) { const values = Object.entries(linksRefs.current); diff --git a/packages/lake/src/components/Toggle.tsx b/packages/lake/src/components/Toggle.tsx index 9892bb7db..da9cea420 100644 --- a/packages/lake/src/components/Toggle.tsx +++ b/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 ( diff --git a/packages/lake/src/components/VirtualizedList.tsx b/packages/lake/src/components/VirtualizedList.tsx index 86326e846..29065c281 100644 --- a/packages/lake/src/components/VirtualizedList.tsx +++ b/packages/lake/src/components/VirtualizedList.tsx @@ -416,6 +416,7 @@ export const VirtualizedList = ({ }, [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) { diff --git a/packages/lake/src/hooks/useUpdateEffect.ts b/packages/lake/src/hooks/useUpdateEffect.ts index eb1e4c813..60f263b9f 100644 --- a/packages/lake/src/hooks/useUpdateEffect.ts +++ b/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); }; diff --git a/packages/shared-business/src/components/ChoicePicker.tsx b/packages/shared-business/src/components/ChoicePicker.tsx index a1ec9ae9a..6ae95404a 100644 --- a/packages/shared-business/src/components/ChoicePicker.tsx +++ b/packages/shared-business/src/components/ChoicePicker.tsx @@ -130,6 +130,7 @@ export const ChoicePicker = ({ 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 = ({ 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 diff --git a/packages/shared-business/src/components/SupportChat.tsx b/packages/shared-business/src/components/SupportChat.tsx index 2d0e0a693..ae9b5f987 100644 --- a/packages/shared-business/src/components/SupportChat.tsx +++ b/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");