refactor: add eslint-plugin-react-hooks (#248)

eslint.config.js

@@ -2,6 +2,8 @@ import eslint from '@eslint/js'
 import tseslint from 'typescript-eslint'
 // @ts-expect-error no types are available for this plugin
 import eslintPluginImport from 'eslint-plugin-import'
+// @ts-expect-error no types are available for this plugin
+import eslintPluginReactHooks from 'eslint-plugin-react-hooks'
 
 export default tseslint.config(
   {
@@ -139,6 +141,19 @@ export default tseslint.config(
       // #endregion misc
     },
   },
+
+  {
+    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
+    plugins: {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      'react-hooks': eslintPluginReactHooks,
+    },
+    rules: {
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'error',
+    },
+  },
+
   {
     files: ['apps/documentation/**'],
     settings: {

package.json

@@ -31,8 +31,7 @@
     "eslint": "^9.15.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-hooks": "5.1.0",
     "prettier": "^3.2.4",
     "turbo": "^2.2.3",
     "typescript": "5.6.3",

packages/router/src/components/RouteMatch.tsx

@@ -20,6 +20,7 @@ export const RouteMatch = ({
 }: RouteMatchProps): React.JSX.Element => {
   const { data, isLoading } = useServerSideProps(route, serverSideProps)
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const routes = React.useMemo(() => loadParentComponents(route), [route.id])
 
   return (
@@ -29,12 +30,6 @@ export const RouteMatch = ({
   )
 }
 
-interface ParentProps<TData = unknown> {
-  children: React.ReactNode
-  data: TData
-  isLoading: boolean
-}
-
 interface TraverseRootComponentsProps<TData = unknown> {
   routes: Array<Route>
   data: TData
@@ -58,13 +53,7 @@ const TraverseRootComponents = React.memo(
     children,
   }: TraverseRootComponentsProps): React.JSX.Element => {
     if (routes.length > index) {
-      const Parent = React.useMemo(
-        () =>
-          routes[index]?.component as unknown as (
-            props: ParentProps,
-          ) => React.JSX.Element,
-        [],
-      )
+      const Parent = (routes[index] as Route).component
 
       return (
         <Parent data={data} isLoading={isLoading}>

packages/router/src/components/RouterProvider.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import type { ReactNode, JSX } from 'react'
 
 import { useListenBrowserUrlUpdates } from '../hooks/useListenBrowserUrlUpdates'
-import { initRouterStore } from '../hooks/useRouterStore'
+import { useInitRouterStore } from '../hooks/useRouterStore'
 import type { ServerProps } from '../types'
 import type { Router } from '../router'
 
@@ -39,7 +39,7 @@ export function RouterProvider({
   router,
   serverProps,
 }: RouterProviderProps): JSX.Element {
-  initRouterStore(serverProps)
+  useInitRouterStore(serverProps)
 
   useListenBrowserUrlUpdates()
 

packages/router/src/hooks/useListenBrowserUrlUpdates.tsx

@@ -9,23 +9,26 @@ import { useRouterStore } from './useRouterStore'
 export const useListenBrowserUrlUpdates = (): void => {
   const updateLocation = useRouterStore((st) => st.updateLocation)
 
-  const updateLocationOnPopStateChange = ({ target }: PopStateEvent): void => {
-    const { pathname, hash, href, search } = (target as typeof window).location
+  useEffect(() => {
+    const updateLocationOnPopStateChange = ({
+      target,
+    }: PopStateEvent): void => {
+      const { location } = target as typeof window
+      const { pathname, hash, href, search } = location
 
-    updateLocation({
-      pathname,
-      hash,
-      href,
-      searchStr: search,
-      search: Object.fromEntries(new URLSearchParams(search)),
-    })
-  }
+      updateLocation({
+        pathname,
+        hash,
+        href,
+        searchStr: search,
+        search: Object.fromEntries(new URLSearchParams(search)),
+      })
+    }
 
-  useEffect(() => {
     window.addEventListener('popstate', updateLocationOnPopStateChange)
 
     return (): void => {
       window.removeEventListener('popstate', updateLocationOnPopStateChange)
     }
-  }, [])
+  }, [updateLocation])
 }

packages/router/src/hooks/useRoute.tsx

@@ -25,12 +25,12 @@ export function sanitizePathname(pathname: string): string {
  * Optimizations should occour on both
  */
 export default function useRoute(pathname?: string): Route | undefined {
+  const { routesById } = useInternalRouter()
+
   if (!pathname) return
 
   pathname = sanitizePathname(pathname)
 
-  const { routesById } = useInternalRouter()
-
   if (routesById[pathname]) return routesById[pathname]
 
   const dynamicRoutes = Object.keys(routesById).filter((route) =>

packages/router/src/hooks/useRouterStore.tsx

@@ -23,7 +23,7 @@ interface RouterState {
   updateLocation: (loc: ParsedLocation) => void
 }
 
-export const initRouterStore = (props?: ServerProps): void => {
+export const useInitRouterStore = (props?: ServerProps): void => {
   const updateLocation = useRouterStore((st) => st.updateLocation)
 
   // Init the store in the server in order to correctly
@@ -49,7 +49,7 @@ export const initRouterStore = (props?: ServerProps): void => {
       searchStr: search,
       search: Object.fromEntries(new URLSearchParams(search)),
     })
-  }, [])
+  }, [updateLocation])
 }
 
 export const useRouterStore = create<RouterState>()((set) => ({

packages/router/src/hooks/useServerSideProps.tsx

@@ -96,7 +96,7 @@ export function useServerSideProps<T>(
     return (): void => {
       setData(undefined)
     }
-  }, [location.pathname])
+  }, [location.pathname, route.options.hasHandler, updateLocation])
 
   return { isLoading, data: data as T }
 }

packages/router/src/types.ts

@@ -1,4 +1,4 @@
-import type { ComponentType as ReactComponentType } from 'react'
+import type { ComponentType as ReactComponentType, ReactNode } from 'react'
 
 export interface Segment {
   type: 'pathname' | 'param' | 'wildcard'
@@ -17,6 +17,8 @@ export interface ServerProps<TProps = unknown> {
 export interface RouteProps<TData = unknown> {
   data: TData
   isLoading: boolean
+
+  children?: ReactNode
 }
 
 export type RouteComponent = ReactComponentType<RouteProps> & {