feat: add react-doctor

[malinskibeniamin]

Summary

Integrate react-doctor as a CI quality gate and fix all detected React performance anti-patterns across the frontend codebase to achieve a 100/100 score.

• Add react-doctor CI workflow and configuration
• Fix React Compiler compatibility issues (immutability, hooks, refs, memoization)
• Eliminate useEffect-based state sync in favor of render-time derivation patterns
• Replace array-index-as-key anti-patterns with stable keys
• Add use no memo directives and React Compiler source filters where needed
• Fix accessibility, async-parallel, and error-boundary warnings
• Wrap Zustand store with typed hook (useApiStoreHook) for React Compiler compatibility

Changes

CI & Tooling

• .github/workflows/frontend-react-doctor.yml — runs react-doctor on PRs touching frontend/, fails on warnings
• frontend/react-doctor.config.json — config with all rules enabled, ignores vendored UI components (redpanda-ui/, ui/, ai-elements/), diff: false for full-repo analysis
• frontend/package.json — add react-doctor dependency and bun run doctor script

React Compiler Fixes

• Replace watch() with useWatch({ control, name }) for memoization compatibility in topic-produce.tsx
• Extract external store mutations into standalone functions to avoid immutability violations
• Add use no memo directives for components incompatible with React Compiler
• Add React Compiler source filter in rsbuild.config.ts
• Wrap useApiStore with useApiStoreHook to provide proper typed selectors

Rule-by-Rule Fixes (145 files, +3774 / -1824)

Rule	Fix applied
no-derived-useState	Replace useEffect state sync with render-time derivation (prevX pattern)
no-cascading-set-state	Move state updates out of effects into event handlers or render
no-effect-event-handler	Move event subscriptions/handlers out of useEffect
no-array-index-as-key	Replace array indices with stable unique keys
no-render-in-render	Extract inline component definitions to module scope
no-prevent-default	Use proper form/event handling patterns
prefer-useReducer	Replace complex multi-setState with useReducer where flagged
prefer-dynamic-import	Add dynamic imports where appropriate
static-components	Extract static JSX outside render
purity	Remove side effects from render path
hooks	Fix hook ordering and conditional hook calls
immutability	Replace direct mutations with immutable updates
refs	Fix ref access patterns (no writes in render)
set-state-in-effect	Remove setState calls from effects
error-boundaries	Add proper error boundary patterns
rules-of-hooks	Fix ESLint react-hooks/rules-of-hooks violations

Notable Refactors

• Knowledge base details: Remove formHasChanges useState + useEffect sync, use isDirty from form.formState directly; replace tag sync effect with render-time derivation
• Admin roles page: Extract refreshData callbacks with useCallback
• Payload component: Refactor ref write patterns and fix JSON render data types
• Backend API store: Add useApiStoreHook wrapper for type-safe Zustand selectors

Other

• frontend/globals.css — add prefers-reduced-motion CSS for accessibility
• Various type fixes across components touched by react-doctor changes

React Doctor Score: 100/100

Test Plan

• CI passes: type-check, lint, unit tests, integration tests, e2e tests
• React Doctor CI check passes with 0 errors and 0 warnings
• Knowledge base edit flow works correctly (edit, save, cancel)
• Topic produce page works correctly (publish messages with different encodings)
• Shadow links CRUD flow works correctly
• Pipeline editor and onboarding wizard function correctly
• ACL/roles management pages work correctly

🤖 Generated with Claude Code

[graham-rp]

👍 maybe even check or something we'd definitely remember before committing?

[malinskibeniamin]

We already have "check" used across various repos for other purposes.

I will make it deeply ingrained into LLM use so you won't have to remember ideally. Every UI will have this command called quality:gate to run so if you switch between projects, it should be seamless

[graham-rp]

$0.02: it feels like there's probably a cleaner way to do this, right?

[malinskibeniamin]

Good call — the previous code had updatePageTitle inside a useEffect which was unnecessary since it is synchronous and idempotent. Calling it during render is the React-recommended pattern for derived values (no effect needed). That said, I agree it reads oddly. I have refactored it to move the title update into the parent route loader/component where it belongs, keeping the details component pure.

[graham-rp]

out of curiosity, why the name change?

[malinskibeniamin]

Renamed formHasChanges → isDirty to use react-hook-form's built-in isDirty from formState directly, eliminating the redundant useState + useEffect sync that was tracking the same value. Less code, same behavior.

[secpanda]

⛔ Snyk checks have failed. 3 issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (3)
⛔	Open Source Security	0	0	1	2	3 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.