/react-review

/react-review

Amaç

React component/hook review: gereksiz re-render, state lokasyonu, erişilebilirlik, performans.

Ne Zaman Kullanılır

• Yavaş sayfa
• Profiler'da fazla render
• A11y audit
• PR review

Input

• Component path; yoksa staged diff

Delege

frontend-reviewer agent'ı; test eksiği için test-engineer alt-delege.

Beklenen Davranış

1. rules/code-style.md + rules/typescript-javascript.md + rules/react.md + rules/testing.md yükle
2. react-vite-frontend skill aktif
3. Kontrol:
   • Inline obj/arr prop (memo'lu child'a)
   • useEffect data fetch -> TanStack Query/RTK Query'e taşı
   • State leveli (lokal mi, lift edilmeli mi, server state mi)
   • Key prop stable
   • useMemo/useCallback profiling olmadan eklenmiş mi (gereksiz)
   • A11y: role, aria-*, label, focus management
   • Test: RTL getByRole, userEvent
4. Bulgu + diff

Örnek Kullanım

/react-review src/features/cart/Cart.tsx

Örnek Çıktı

# React Review: src/features/cart/Cart.tsx

## High
- [ ] Line 34 `<Item style={ { color: 'red' } } />` her render yeni obj -> `Item` `memo` ise faydasız. Stil dışarı al.
- [ ] Line 56 `useEffect(fetchCart, [])` -> TanStack Query: `useQuery(['cart'], fetchCart)` (cache, retry, race fix).

## Medium
- [ ] Line 88 `<button>` `aria-label` yok ikon-only.
- [ ] Line 102 list `key={i}` -> `key={item.id}`.

## Low
- [ ] `useMemo(() => items.length, [items])` gereksiz, primitive.

## Test
- `findByRole('button', { name: /remove/i })` ile remove path test et.