---
description: React best practices and patterns
globs: **/*.tsx, **/*.jsx
---

# React

- Use arrow functions for components
- Inline component props next to the component prop argument
- Derive state where possible
- Avoid unnecessary `useState` and `useEffect`
- Use `useEffect` only when synchronizing with external systems (for example browser APIs, subscriptions, timers, network interactions)
- Keep effects small, deterministic, and cleanup-safe
- Avoid `useMemo` and `useCallback` unless its absolutely necessary
- Create a story for each React component if Storybook is used