React和Next.js专家

为React提供AI代码审查 React

diffray理解React。Hooks规则、组件模式、性能优化和可访问性——为现代React应用提供AI驱动的代码审查。

React18+
Next.js13+ App Router
Remix2.x
Gatsby5.x
Vite + React5.x

为React开发者构建

理解React模式、hooks和现代最佳实践的AI代理。

Hooks和状态

捕获React hooks违规、过时闭包和状态管理bug。

  • useEffect依赖
  • 条件hooks
  • 循环中的状态更新

性能

识别不必要的重新渲染、缺失的记忆化和bundle膨胀。

  • useMemo/useCallback
  • 渲染优化
  • 代码分割

可访问性

确保组件具有适当的ARIA和键盘支持的可访问性。

  • ARIA属性
  • 键盘导航
  • 焦点管理

组件设计

验证组件模式、props和组合最佳实践。

  • Prop类型
  • 组件组合
  • Key prop使用

我们捕获的常见React问题

缺失useEffect依赖
过时数据、无限循环、竞态条件
Bugs代理验证依赖数组
不必要的重新渲染
UI缓慢、资源浪费、UX差
Performance代理发现缺失的记忆化
通过dangerouslySetInnerHTML的XSS
安全漏洞、数据窃取
Security代理标记不安全的HTML注入
缺失可访问性标签
屏幕阅读器无法使用、法律风险
交互元素的可访问性检查

为您的React栈定制规则

执行您团队的React模式。要求特定的hook用法、组件结构或可访问性标准。

  • 为事件处理程序强制使用useCallback
  • 在路由中要求error boundaries
  • 验证表单的可访问性
  • 检查适当的加载状态
.diffray/rules/react.yaml
rules:
  - id: react_use_error_boundary
    agent: bugs
    title: Routes need error boundaries
    description: All route components should
      have error boundaries for resilience
    importance: 8
    match:
      file_glob:
        - 'app/**/page.tsx'
        - 'pages/**/*.tsx'
    checklist:
      - Verify ErrorBoundary wraps component
      - Check for error fallback UI
      - Ensure errors are logged
    tags:
      - react
      - reliability
      - next-js

React常见问题

构建更好的React应用

加入使用diffray进行专业AI代码审查的React团队。

Hooks验证
性能检查
可访问性审计