chore(linting): Add react-hooks eslint rules

.eslintrc.js

@@ -29,6 +29,7 @@ module.exports = {
         'eslint:recommended',
         'plugin:@typescript-eslint/recommended',
         'plugin:react/recommended',
+        'plugin:react-hooks/recommended',
         'plugin:eslint-comments/recommended',
         'plugin:storybook/recommended',
         'prettier',
@@ -59,6 +60,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',
@@ -252,6 +255,12 @@ module.exports = {
                 node: true,
             },
         },
+        {
+            files: ['*Type.ts'],
+            rules: {
+                'no-restricted-imports': 'off',
+            },
+        },
     ],
     reportUnusedDisableDirectives: true,
 }

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 (

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 (
@@ -62,6 +64,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 (

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 />

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]: {

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])
 }

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) {

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 ${

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 (

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 (

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 (

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}</>
 }

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

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 => {

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({

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) {

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 (

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 (

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 (

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(() => {

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 (

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 ? (

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 (

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

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}`)

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 = (

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'),

frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.stories.tsx

@@ -32,6 +32,8 @@ export const EventsFree: StoryFn<typeof TaxonomicFilter> = (args) => {
         // Highlight the second item, as the first one is "All events", which doesn't have a definition to show
         // - we do want to show the definition popover here too
         setIndex(1)
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
     return (
         <div className="w-fit border rounded p-2 bg-bg-light">
@@ -66,6 +68,8 @@ export const Actions: StoryFn<typeof TaxonomicFilter> = (args) => {
         // Highlight the second item, as the first one is "All events", which doesn't have a definition to show
         // - we do want to show the definition popover here too
         setIndex(0)
+        // FIXME
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
     return (
         <div className="w-fit border rounded p-2 bg-white">