wispbit logo

posthog React Typescript Patterns

typescriptreact
Use Kea logic for all state management instead of React state hooks. Follow PostHog's two-layer architecture pattern.
State Management
Define state logic with Kea and connect to React components using `useValues` and `useActions`.
Component Structure
Use functional components with explicit return types and named exports.
Import/Export Conventions
Prefer named exports over default exports and use path aliases for clean imports.

Install this rule for wispbit Cloud

Add this rule to wispbit and it will run when you open a pull request

Install this rule with wispbit CLI

Run this command in your terminal to install the rule locally

npx @wispbit/cli rule install posthog-react-typescript-patterns

Install this rule for Coderabbit

Copy the configuration below and add it to your repository as .coderabbit.yml in your project root.

reviews:
  path_instructions:
    - path: "*.tsx,*.ts"
      instructions: |
                Use Kea logic for all state management instead of React state hooks. Follow PostHog's two-layer architecture pattern.
        
        State Management
        Define state logic with Kea and connect to React components using `useValues` and `useActions`.
        
        Component Structure
        Use functional components with explicit return types and named exports.
        
        Import/Export Conventions
        Prefer named exports over default exports and use path aliases for clean imports.
        
        TypeScript Requirements
        Include explicit return types for all functions and use auto-generated types from Kea logic.
        
        Bad:
        
        ```typescript
        // Using React state hooks
        import React, { useState, useEffect } from 'react'
        
        export default function ExampleComponent() {
            const [data, setData] = useState(null)
            const [loading, setLoading] = useState(false)
            const [filter, setFilter] = useState('')
        
            useEffect(() => {
                setLoading(true)
                api.getData().then(setData).finally(() => setLoading(false))
            }, [])
        
            return <div>{/* Component JSX */}</div>
        }
        ```
        
        Good:
        
        ```typescript
        // Using Kea for state management
        export const exampleLogic = kea<exampleLogicType>([
            path(['scenes', 'example']),
            actions({
                loadData: true,
                setFilter: (filter: string) => ({ filter }),
            }),
            reducers({
                filter: ['', { setFilter: (_, { filter }) => filter }],
            }),
            loaders(() => ({
                data: {
                    loadData: async () => {
                        return await api.getData()
                    },
                },
            })),
        ])
        
        export function ExampleComponent(): JSX.Element {
            const { data, loading, filter } = useValues(exampleLogic)
            const { loadData, setFilter } = useActions(exampleLogic)
        
            return (
                <div>
                    {/* Component JSX */}
                </div>
            )
        }
        ```

Install this rule for Greptile

Greptile rules can be added through the web interface. Please see this documentation for details on how to add custom rules and context.

Use Kea logic for all state management instead of React state hooks. Follow PostHog's two-layer architecture pattern.
State Management
Define state logic with Kea and connect to React components using `useValues` and `useActions`.
Component Structure
Use functional components with explicit return types and named exports.
Import/Export Conventions
Prefer named exports over default exports and use path aliases for clean imports.
TypeScript Requirements
Include explicit return types for all functions and use auto-generated types from Kea logic.
Bad:
```typescript
// Using React state hooks
import React, { useState, useEffect } from 'react'
export default function ExampleComponent() {
    const [data, setData] = useState(null)
    const [loading, setLoading] = useState(false)
    const [filter, setFilter] = useState('')
    useEffect(() => {
        setLoading(true)
        api.getData().then(setData).finally(() => setLoading(false))
    }, [])
    return <div>{/* Component JSX */}</div>
}
```
Good:
```typescript
// Using Kea for state management
export const exampleLogic = kea<exampleLogicType>([
    path(['scenes', 'example']),
    actions({
        loadData: true,
        setFilter: (filter: string) => ({ filter }),
    }),
    reducers({
        filter: ['', { setFilter: (_, { filter }) => filter }],
    }),
    loaders(() => ({
        data: {
            loadData: async () => {
                return await api.getData()
            },
        },
    })),
])
export function ExampleComponent(): JSX.Element {
    const { data, loading, filter } = useValues(exampleLogic)
    const { loadData, setFilter } = useActions(exampleLogic)
    return (
        <div>
            {/* Component JSX */}
        </div>
    )
}
```

File Path Patterns:

*.tsx
*.ts

Install this rule for GitHub Copilot

Copilot instructions can be added through the interface. See the documentation for details on how to create coding guidelines.

Use Kea logic for all state management instead of React state hooks. Follow PostHog's two-layer architecture pattern.
State Management
Define state logic with Kea and connect to React components using `useValues` and `useActions`.
Component Structure
Use functional components with explicit return types and named exports.
Import/Export Conventions
Prefer named exports over default exports and use path aliases for clean imports.
TypeScript Requirements
Include explicit return types for all functions and use auto-generated types from Kea logic.
Bad:
```typescript
// Using React state hooks
import React, { useState, useEffect } from 'react'
export default function ExampleComponent() {
    const [data, setData] = useState(null)
    const [loading, setLoading] = useState(false)
    const [filter, setFilter] = useState('')
    useEffect(() => {
        setLoading(true)
        api.getData().then(setData).finally(() => setLoading(false))
    }, [])
    return <div>{/* Component JSX */}</div>
}
```
Good:
```typescript
// Using Kea for state management
export const exampleLogic = kea<exampleLogicType>([
    path(['scenes', 'example']),
    actions({
        loadData: true,
        setFilter: (filter: string) => ({ filter }),
    }),
    reducers({
        filter: ['', { setFilter: (_, { filter }) => filter }],
    }),
    loaders(() => ({
        data: {
            loadData: async () => {
                return await api.getData()
            },
        },
    })),
])
export function ExampleComponent(): JSX.Element {
    const { data, loading, filter } = useValues(exampleLogic)
    const { loadData, setFilter } = useActions(exampleLogic)
    return (
        <div>
            {/* Component JSX */}
        </div>
    )
}
```

File Path Patterns:

*.tsx
*.ts

Install this rule for Graphite Diamond

Diamond custom rules can be added through the interface. See the documentation for details on how to create custom rules.

Use Kea logic for all state management instead of React state hooks. Follow PostHog's two-layer architecture pattern.
State Management
Define state logic with Kea and connect to React components using `useValues` and `useActions`.
Component Structure
Use functional components with explicit return types and named exports.
Import/Export Conventions
Prefer named exports over default exports and use path aliases for clean imports.
TypeScript Requirements
Include explicit return types for all functions and use auto-generated types from Kea logic.
Bad:
```typescript
// Using React state hooks
import React, { useState, useEffect } from 'react'
export default function ExampleComponent() {
    const [data, setData] = useState(null)
    const [loading, setLoading] = useState(false)
    const [filter, setFilter] = useState('')
    useEffect(() => {
        setLoading(true)
        api.getData().then(setData).finally(() => setLoading(false))
    }, [])
    return <div>{/* Component JSX */}</div>
}
```
Good:
```typescript
// Using Kea for state management
export const exampleLogic = kea<exampleLogicType>([
    path(['scenes', 'example']),
    actions({
        loadData: true,
        setFilter: (filter: string) => ({ filter }),
    }),
    reducers({
        filter: ['', { setFilter: (_, { filter }) => filter }],
    }),
    loaders(() => ({
        data: {
            loadData: async () => {
                return await api.getData()
            },
        },
    })),
])
export function ExampleComponent(): JSX.Element {
    const { data, loading, filter } = useValues(exampleLogic)
    const { loadData, setFilter } = useActions(exampleLogic)
    return (
        <div>
            {/* Component JSX */}
        </div>
    )
}
```

File Path Patterns:

*.tsx
*.ts

Use with Cline

Copy the rule below and ask Cline to review your code using this rule

Use Kea logic for all state management instead of React state hooks. Follow PostHog's two-layer architecture pattern.
State Management
Define state logic with Kea and connect to React components using `useValues` and `useActions`.
Component Structure
Use functional components with explicit return types and named exports.
Import/Export Conventions
Prefer named exports over default exports and use path aliases for clean imports.
TypeScript Requirements
Include explicit return types for all functions and use auto-generated types from Kea logic.
Bad:
```typescript
// Using React state hooks
import React, { useState, useEffect } from 'react'
export default function ExampleComponent() {
    const [data, setData] = useState(null)
    const [loading, setLoading] = useState(false)
    const [filter, setFilter] = useState('')
    useEffect(() => {
        setLoading(true)
        api.getData().then(setData).finally(() => setLoading(false))
    }, [])
    return <div>{/* Component JSX */}</div>
}
```
Good:
```typescript
// Using Kea for state management
export const exampleLogic = kea<exampleLogicType>([
    path(['scenes', 'example']),
    actions({
        loadData: true,
        setFilter: (filter: string) => ({ filter }),
    }),
    reducers({
        filter: ['', { setFilter: (_, { filter }) => filter }],
    }),
    loaders(() => ({
        data: {
            loadData: async () => {
                return await api.getData()
            },
        },
    })),
])
export function ExampleComponent(): JSX.Element {
    const { data, loading, filter } = useValues(exampleLogic)
    const { loadData, setFilter } = useActions(exampleLogic)
    return (
        <div>
            {/* Component JSX */}
        </div>
    )
}
```

Use with OpenAI Codex

Copy the rule below and ask OpenAI Codex to review your code using this rule

Use Kea logic for all state management instead of React state hooks. Follow PostHog's two-layer architecture pattern.
State Management
Define state logic with Kea and connect to React components using `useValues` and `useActions`.
Component Structure
Use functional components with explicit return types and named exports.
Import/Export Conventions
Prefer named exports over default exports and use path aliases for clean imports.
TypeScript Requirements
Include explicit return types for all functions and use auto-generated types from Kea logic.
Bad:
```typescript
// Using React state hooks
import React, { useState, useEffect } from 'react'
export default function ExampleComponent() {
    const [data, setData] = useState(null)
    const [loading, setLoading] = useState(false)
    const [filter, setFilter] = useState('')
    useEffect(() => {
        setLoading(true)
        api.getData().then(setData).finally(() => setLoading(false))
    }, [])
    return <div>{/* Component JSX */}</div>
}
```
Good:
```typescript
// Using Kea for state management
export const exampleLogic = kea<exampleLogicType>([
    path(['scenes', 'example']),
    actions({
        loadData: true,
        setFilter: (filter: string) => ({ filter }),
    }),
    reducers({
        filter: ['', { setFilter: (_, { filter }) => filter }],
    }),
    loaders(() => ({
        data: {
            loadData: async () => {
                return await api.getData()
            },
        },
    })),
])
export function ExampleComponent(): JSX.Element {
    const { data, loading, filter } = useValues(exampleLogic)
    const { loadData, setFilter } = useActions(exampleLogic)
    return (
        <div>
            {/* Component JSX */}
        </div>
    )
}
```

Use with Cursor

Copy the rule below and ask Cursor to review your code using this rule

Use Kea logic for all state management instead of React state hooks. Follow PostHog's two-layer architecture pattern.
State Management
Define state logic with Kea and connect to React components using `useValues` and `useActions`.
Component Structure
Use functional components with explicit return types and named exports.
Import/Export Conventions
Prefer named exports over default exports and use path aliases for clean imports.
TypeScript Requirements
Include explicit return types for all functions and use auto-generated types from Kea logic.
Bad:
```typescript
// Using React state hooks
import React, { useState, useEffect } from 'react'
export default function ExampleComponent() {
    const [data, setData] = useState(null)
    const [loading, setLoading] = useState(false)
    const [filter, setFilter] = useState('')
    useEffect(() => {
        setLoading(true)
        api.getData().then(setData).finally(() => setLoading(false))
    }, [])
    return <div>{/* Component JSX */}</div>
}
```
Good:
```typescript
// Using Kea for state management
export const exampleLogic = kea<exampleLogicType>([
    path(['scenes', 'example']),
    actions({
        loadData: true,
        setFilter: (filter: string) => ({ filter }),
    }),
    reducers({
        filter: ['', { setFilter: (_, { filter }) => filter }],
    }),
    loaders(() => ({
        data: {
            loadData: async () => {
                return await api.getData()
            },
        },
    })),
])
export function ExampleComponent(): JSX.Element {
    const { data, loading, filter } = useValues(exampleLogic)
    const { loadData, setFilter } = useActions(exampleLogic)
    return (
        <div>
            {/* Component JSX */}
        </div>
    )
}
```

Use with Claude Code

Copy the rule below and ask Claude Code to review your code using this rule

Use Kea logic for all state management instead of React state hooks. Follow PostHog's two-layer architecture pattern.
State Management
Define state logic with Kea and connect to React components using `useValues` and `useActions`.
Component Structure
Use functional components with explicit return types and named exports.
Import/Export Conventions
Prefer named exports over default exports and use path aliases for clean imports.
TypeScript Requirements
Include explicit return types for all functions and use auto-generated types from Kea logic.
Bad:
```typescript
// Using React state hooks
import React, { useState, useEffect } from 'react'
export default function ExampleComponent() {
    const [data, setData] = useState(null)
    const [loading, setLoading] = useState(false)
    const [filter, setFilter] = useState('')
    useEffect(() => {
        setLoading(true)
        api.getData().then(setData).finally(() => setLoading(false))
    }, [])
    return <div>{/* Component JSX */}</div>
}
```
Good:
```typescript
// Using Kea for state management
export const exampleLogic = kea<exampleLogicType>([
    path(['scenes', 'example']),
    actions({
        loadData: true,
        setFilter: (filter: string) => ({ filter }),
    }),
    reducers({
        filter: ['', { setFilter: (_, { filter }) => filter }],
    }),
    loaders(() => ({
        data: {
            loadData: async () => {
                return await api.getData()
            },
        },
    })),
])
export function ExampleComponent(): JSX.Element {
    const { data, loading, filter } = useValues(exampleLogic)
    const { loadData, setFilter } = useActions(exampleLogic)
    return (
        <div>
            {/* Component JSX */}
        </div>
    )
}
```

Install this rule for Windsurf

To set up rules for Windsurf Reviews, please see this documentation 

Use Kea logic for all state management instead of React state hooks. Follow PostHog's two-layer architecture pattern.
State Management
Define state logic with Kea and connect to React components using `useValues` and `useActions`.
Component Structure
Use functional components with explicit return types and named exports.
Import/Export Conventions
Prefer named exports over default exports and use path aliases for clean imports.
TypeScript Requirements
Include explicit return types for all functions and use auto-generated types from Kea logic.
Bad:
```typescript
// Using React state hooks
import React, { useState, useEffect } from 'react'
export default function ExampleComponent() {
    const [data, setData] = useState(null)
    const [loading, setLoading] = useState(false)
    const [filter, setFilter] = useState('')
    useEffect(() => {
        setLoading(true)
        api.getData().then(setData).finally(() => setLoading(false))
    }, [])
    return <div>{/* Component JSX */}</div>
}
```
Good:
```typescript
// Using Kea for state management
export const exampleLogic = kea<exampleLogicType>([
    path(['scenes', 'example']),
    actions({
        loadData: true,
        setFilter: (filter: string) => ({ filter }),
    }),
    reducers({
        filter: ['', { setFilter: (_, { filter }) => filter }],
    }),
    loaders(() => ({
        data: {
            loadData: async () => {
                return await api.getData()
            },
        },
    })),
])
export function ExampleComponent(): JSX.Element {
    const { data, loading, filter } = useValues(exampleLogic)
    const { loadData, setFilter } = useActions(exampleLogic)
    return (
        <div>
            {/* Component JSX */}
        </div>
    )
}
```