fix: react render error (#25227)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

.eslintrc.js

@@ -42,6 +42,7 @@ module.exports = {
     },
     plugins: [
         'react',
+        "react-hooks",
         'cypress',
         '@typescript-eslint',
         'compat',
@@ -51,6 +52,8 @@ module.exports = {
         'unused-imports',
     ],
     rules: {
+        "react-hooks/rules-of-hooks": "warn",
+        "react-hooks/exhaustive-deps": "warn",
         // PyCharm always adds curly braces, I guess vscode doesn't, PR reviewers often complain they are present on props that don't need them
         // let's save the humans time and let the machines do the work
         // "never" means if the prop does not need the curly braces, they will be removed/errored

frontend/src/queries/nodes/HogQLX/render.tsx

@@ -24,6 +24,29 @@ export function parseHogQLX(value: any): any {
     return value.map((v) => parseHogQLX(v))
 }
 
+function ViewRecordingModalButton({ sessionId }: { sessionId: string }): JSX.Element {
+    const { openSessionPlayer } = useActions(sessionPlayerModalLogic)
+    return (
+        <ErrorBoundary>
+            <LemonButton
+                type="primary"
+                size="xsmall"
+                sideIcon={<IconPlayCircle />}
+                data-attr="hog-ql-view-recording-button"
+                to={urls.replaySingle(sessionId)}
+                onClick={(e) => {
+                    e.preventDefault()
+                    if (sessionId) {
+                        openSessionPlayer({ id: sessionId })
+                    }
+                }}
+            >
+                View recording
+            </LemonButton>
+        </ErrorBoundary>
+    )
+}
+
 export function renderHogQLX(value: any): JSX.Element {
     const object = parseHogQLX(value)
 
@@ -44,27 +67,7 @@ export function renderHogQLX(value: any): JSX.Element {
             )
         } else if (tag === 'RecordingButton') {
             const { sessionId, ...props } = rest
-            const { openSessionPlayer } = useActions(sessionPlayerModalLogic)
-            return (
-                <ErrorBoundary>
-                    <LemonButton
-                        type="primary"
-                        size="xsmall"
-                        sideIcon={<IconPlayCircle />}
-                        data-attr="hog-ql-view-recording-button"
-                        {...props}
-                        to={urls.replaySingle(sessionId)}
-                        onClick={(e) => {
-                            e.preventDefault()
-                            if (sessionId) {
-                                openSessionPlayer({ id: sessionId })
-                            }
-                        }}
-                    >
-                        View recording
-                    </LemonButton>
-                </ErrorBoundary>
-            )
+            return <ViewRecordingModalButton sessionId={sessionId} {...props} />
         } else if (tag === 'a') {
             const { href, source, target } = rest
             return (

package.json

@@ -267,6 +267,7 @@
         "eslint-plugin-jest": "^28.6.0",
         "eslint-plugin-posthog": "link:./eslint-rules",
         "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.6.2",
         "eslint-plugin-simple-import-sort": "^10.0.0",
         "eslint-plugin-storybook": "^0.6.15",
         "eslint-plugin-unused-imports": "^3.1.0",

pnpm-lock.yaml

@@ -614,6 +614,9 @@ devDependencies:
   eslint-plugin-react:
     specifier: ^7.33.2
     version: 7.33.2(eslint@8.57.0)
+  eslint-plugin-react-hooks:
+    specifier: ^4.6.2
+    version: 4.6.2(eslint@8.57.0)
   eslint-plugin-simple-import-sort:
     specifier: ^10.0.0
     version: 10.0.0(eslint@8.57.0)
@@ -12274,6 +12277,15 @@ packages:
       - typescript
     dev: true
 
+  /eslint-plugin-react-hooks@4.6.2(eslint@8.57.0):
+    resolution: {integrity: sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
+    dependencies:
+      eslint: 8.57.0
+    dev: true
+
   /eslint-plugin-react@7.33.2(eslint@8.57.0):
     resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==}
     engines: {node: '>=4'}