Add react-hooks eslint rules

PostHog · Oct 26, 2023 · 4f09431 · 4f09431
1 parent 4c0a619
commit 4f09431
Show file tree

Hide file tree

Showing 147 changed files with 431 additions and 5 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -23,6 +23,7 @@ module.exports = {
         'eslint:recommended',
         'plugin:@typescript-eslint/recommended',
         'plugin:react/recommended',
+        'plugin:react-hooks/recommended',
         'plugin:eslint-comments/recommended',
         'plugin:storybook/recommended',
         'prettier',
@@ -53,6 +54,8 @@ module.exports = {
                 html: true,
             },
         ],
+        'react-hooks/rules-of-hooks': 'error',
+        'react-hooks/exhaustive-deps': 'error',
         'no-unused-vars': 'off',
         '@typescript-eslint/no-unused-vars': [
             'error',
@@ -236,6 +239,12 @@ module.exports = {
                 '@typescript-eslint/no-var-requires': 'off',
             },
         },
+        {
+            files: ['*Type.ts'],
+            rules: {
+                'no-restricted-imports': 'off',
+            },
+        },
     ],
     reportUnusedDisableDirectives: true,
 }
diff --git a/frontend/src/layout/FeaturePreviews/FeaturePreviewsModal.tsx b/frontend/src/layout/FeaturePreviews/FeaturePreviewsModal.tsx
@@ -15,6 +15,8 @@ export function FeaturePreviewsModal({
         useValues(featurePreviewsLogic)
     const { hideFeaturePreviewsModal, loadEarlyAccessFeatures } = useActions(featurePreviewsLogic)
 
+    // FIXME
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     useLayoutEffect(() => loadEarlyAccessFeatures(), [])
 
     return (

diff --git a/frontend/src/layout/navigation-3000/Navigation.stories.tsx b/frontend/src/layout/navigation-3000/Navigation.stories.tsx
@@ -35,6 +35,8 @@ export function LightMode(): JSX.Element {
     useEffect(() => {
         router.actions.push(urls.projectHomepage())
         overrideTheme(false)
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     return <App />
@@ -45,6 +47,8 @@ export function DarkMode(): JSX.Element {
     useEffect(() => {
         router.actions.push(urls.projectHomepage())
         overrideTheme(true)
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     return <App />

diff --git a/frontend/src/layout/navigation-3000/components/Sidebar.stories.tsx b/frontend/src/layout/navigation-3000/components/Sidebar.stories.tsx
@@ -42,6 +42,8 @@ export function Dashboards(): JSX.Element {
     const { activeNavbarItem } = useValues(navigation3000Logic)
     useEffect(() => {
         showSidebar(Scene.Dashboards) // Active this sidebar
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     return (
@@ -61,6 +63,8 @@ export function FeatureFlags(): JSX.Element {
     const { activeNavbarItem } = useValues(navigation3000Logic)
     useEffect(() => {
         showSidebar(Scene.FeatureFlags) // Activate this sidebar
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     return (

diff --git a/frontend/src/layout/navigation/Navigation.stories.tsx b/frontend/src/layout/navigation/Navigation.stories.tsx
@@ -73,6 +73,8 @@ export function AppPageWithSideBarHidden(): JSX.Element {
     useEffect(() => {
         toggleSideBarBase(false)
         toggleSideBarMobile(false)
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     return <BaseAppPage />
@@ -84,6 +86,8 @@ export function AppPageWithSideBarShown(): JSX.Element {
     useEffect(() => {
         toggleSideBarBase(true)
         toggleSideBarMobile(true)
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     return <BaseAppPage />

diff --git a/frontend/src/lib/components/ActivityLog/activityLogLogic.test.setup.ts b/frontend/src/lib/components/ActivityLog/activityLogLogic.test.setup.ts
@@ -45,6 +45,8 @@ async function testSetup(
     scope: ActivityScope,
     url: string
 ): Promise<ReturnType<typeof activityLogLogic.build>> {
+    // FIXME
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useMocks({
         get: {
             [url]: {

diff --git a/frontend/src/lib/components/AnnotationsOverlay/useAnnotationsPositioning.ts b/frontend/src/lib/components/AnnotationsOverlay/useAnnotationsPositioning.ts
@@ -36,5 +36,7 @@ export function useAnnotationsPositioning(
                 firstTickLeftPx: 0,
             }
         }
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [chart, chartWidth, chartHeight])
 }
diff --git a/frontend/src/lib/components/BillingAlertsV2.tsx b/frontend/src/lib/components/BillingAlertsV2.tsx
@@ -15,6 +15,8 @@ export function BillingAlertsV2(): JSX.Element | null {
         if (billingAlert) {
             reportBillingAlertShown(billingAlert)
         }
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [billingAlert])
 
     if (!billingAlert || alertHidden) {

diff --git a/frontend/src/lib/components/Cards/CardMeta.tsx b/frontend/src/lib/components/Cards/CardMeta.tsx
@@ -49,6 +49,8 @@ export function CardMeta({
 
     useEffect(() => {
         setPrimaryHeight?.(primaryHeight)
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [primaryHeight])
 
     const foldedHeight = `calc(${primaryHeight}px ${

diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
@@ -207,6 +207,8 @@ export function FilterBasedCardContent({
         ) {
             window.dispatchEvent(new Event('resize'))
         }
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [style?.height])
 
     return (

diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx b/frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx
@@ -391,15 +391,23 @@ export function ControlledDefinitionPopover({
         return null
     }
 
+    // FIXME
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const { state, singularType, isElement, definition } = useValues(definitionPopoverLogic)
+    // FIXME
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const { setDefinition } = useActions(definitionPopoverLogic)
 
     const icon = group.getIcon?.(definition || item)
 
     // Must use `useEffect` here to hydrate popover card with the newest item, since lifecycle of `ItemPopover` is controlled
     // independently by `infiniteListLogic`
+    // FIXME
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
         setDefinition(item)
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [item])
 
     return (

diff --git a/frontend/src/lib/components/EditableField/EditableField.tsx b/frontend/src/lib/components/EditableField/EditableField.tsx
@@ -264,12 +264,16 @@ const AutosizeInput = ({
 
     const inputStyles = useMemo(() => {
         return inputRef.current ? window.getComputedStyle(inputRef.current) : null
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputRef.current])
 
     useLayoutEffect(() => {
         if (inputStyles && placeHolderSizerRef.current) {
             copyStyles(inputStyles, placeHolderSizerRef.current)
         }
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [placeHolderSizerRef, placeHolderSizerRef])
 
     useLayoutEffect(() => {
@@ -291,6 +295,8 @@ const AutosizeInput = ({
         if (newInputWidth !== inputWidth) {
             setInputWidth(newInputWidth)
         }
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [sizerRef.current, placeHolderSizerRef.current, placeholder, value])
 
     return (

diff --git a/frontend/src/lib/components/ExportButton/exporter.tsx b/frontend/src/lib/components/ExportButton/exporter.tsx
@@ -131,6 +131,8 @@ function DelayedContent({ atStart, afterDelay }: DelayedContentProps): JSX.Eleme
         setTimeout(() => {
             setContent(afterDelay)
         }, 30000)
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
     return <>{content}</>
 }
diff --git a/frontend/src/lib/components/FullScreen.tsx b/frontend/src/lib/components/FullScreen.tsx
@@ -52,6 +52,8 @@ export function FullScreen({ onExit }: { onExit?: () => any }): null {
                 // will break on IE11
             }
         }
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     return null

diff --git a/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx b/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx
@@ -414,6 +414,8 @@ export function HedgehogBuddy({
 
     useEffect(() => {
         return actor.setupKeyboardListeners()
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -422,10 +424,14 @@ export function HedgehogBuddy({
 
     useEffect(() => {
         actor.accessories = accessories
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [accessories])
 
     useEffect(() => {
         actor.darkMode = isDarkModeOn
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isDarkModeOn])
 
     useEffect(() => {
@@ -441,6 +447,8 @@ export function HedgehogBuddy({
         return () => {
             clearTimeout(timer)
         }
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     useEffect(() => {
@@ -455,6 +463,8 @@ export function HedgehogBuddy({
 
     useEffect(() => {
         onPositionChange?.(actor)
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [actor.x, actor.y])
 
     const onClick = (): void => {

diff --git a/frontend/src/lib/components/Map/Map.tsx b/frontend/src/lib/components/Map/Map.tsx
@@ -49,6 +49,8 @@ export function MapComponent({ center, markers, className, mapLibreStyleUrl }: M
                 marker.addTo(map.current)
             }
         }
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     useResizeObserver({

diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx
@@ -197,6 +197,8 @@ export function PropertiesTable({
         )
     }
 
+    // FIXME
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const objectProperties = useMemo(() => {
         if (!properties || !(properties instanceof Object)) {
             return []
@@ -243,6 +245,8 @@ export function PropertiesTable({
             })
         }
         return entries
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [properties, sortProperties, searchTerm, filtered])
 
     if (properties instanceof Object) {

diff --git a/frontend/src/lib/components/PropertyFilters/PathItemFilters.tsx b/frontend/src/lib/components/PropertyFilters/PathItemFilters.tsx
@@ -34,6 +34,8 @@ export function PathItemFilters({
         if (propertyFilters && !objectsEqual(propertyFilters, filtersWithNew)) {
             setFilters([...propertyFilters, {} as EmptyPropertyFilter])
         }
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [propertyFilters])
 
     return (

diff --git a/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx b/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx
@@ -57,6 +57,8 @@ export function PropertyFilters({
     // Update the logic's internal filters when the props change
     useEffect(() => {
         setFilters(propertyFilters ?? [])
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [propertyFilters])
 
     return (

diff --git a/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx b/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx
@@ -89,6 +89,8 @@ export function OperatorValueSelect({
         } else if (limitedElementProperty && !operators.includes(currentOperator)) {
             setCurrentOperator(PropertyOperator.Exact)
         }
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [propertyDefinition, propkey, operator])
 
     return (

diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyValue.tsx b/frontend/src/lib/components/PropertyFilters/components/PropertyValue.tsx
@@ -73,6 +73,8 @@ export function PropertyValue({
                 setInput(toString(value))
             }
         }
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value])
 
     const load = (newInput: string | undefined): void => {
@@ -94,6 +96,8 @@ export function PropertyValue({
 
     useEffect(() => {
         load('')
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [propertyKey])
 
     useEffect(() => {

diff --git a/frontend/src/lib/components/ResizableTable/index.tsx b/frontend/src/lib/components/ResizableTable/index.tsx
@@ -206,6 +206,8 @@ export function ResizableTable<RecordType extends Record<any, any> = any>({
             updateScrollGradient()
             setHeaderShouldRender(true)
         }
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     return (

diff --git a/frontend/src/lib/components/RestrictedArea.tsx b/frontend/src/lib/components/RestrictedArea.tsx
@@ -57,6 +57,8 @@ export function RestrictedArea({
             )}s and up. Your level is ${membershipLevelToName.get(scopeAccessLevel)}.`
         }
         return null
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentOrganization])
 
     return restrictionReason ? (

diff --git a/frontend/src/lib/components/StickyView/StickyView.tsx b/frontend/src/lib/components/StickyView/StickyView.tsx
@@ -24,6 +24,8 @@ export function StickyView({ children, top = '0px', marginTop = 0 }: StickyViewP
         window.addEventListener('scroll', onScroll)
 
         return () => window.removeEventListener('scroll', onScroll)
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [fixed])
 
     return (

diff --git a/frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx b/frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx
@@ -82,6 +82,8 @@ export function EditSubscription({
         if (subscription?.target_type === 'slack' && slackIntegration) {
             loadSlackChannels()
         }
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [subscription?.target_type, slackIntegration])
 
     // If slackChannels aren't loaded, make sure we display only the channel name and not the actual underlying value

diff --git a/frontend/src/lib/components/Support/SupportModal.tsx b/frontend/src/lib/components/Support/SupportModal.tsx
@@ -55,8 +55,12 @@ export function SupportModal({ loggedIn = true }: { loggedIn?: boolean }): JSX.E
         }
         return null
     }
+    // FIXME
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const dropRef = useRef<HTMLDivElement>(null)
 
+    // FIXME
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const { setFilesToUpload, filesToUpload, uploading } = useUploadFiles({
         onUpload: (url, fileName) => {
             setSendSupportRequestValue('message', sendSupportRequest.message + `\n\nAttachment "${fileName}": ${url}`)

diff --git a/frontend/src/lib/components/TZLabel/index.tsx b/frontend/src/lib/components/TZLabel/index.tsx
@@ -33,6 +33,8 @@ const TZLabelPopoverContent = React.memo(function TZLabelPopoverContent({
 
     useEffect(() => {
         reportTimezoneComponentViewed('label', currentTeam?.timezone, shortTimeZone())
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     return (
@@ -106,6 +108,8 @@ function TZLabelRaw({
             }
         }, 1000)
         return () => clearInterval(interval)
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [parsedTime, format])
 
     const innerContent = (

diff --git a/frontend/src/lib/components/Table/Table.tsx b/frontend/src/lib/components/Table/Table.tsx
@@ -25,6 +25,8 @@ export function createdAtColumn<T extends Record<string, any> = Record<string, a
 }
 
 export function createdByColumn<T extends Record<string, any> = Record<string, any>>(items: T[]): ColumnType<T> {
+    // FIXME
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const { user } = useValues(userLogic)
     return {
         title: normalizeColumnTitle('Created by'),