---
name: modern-best-practice-react-components
description: Build clean, modern React components that apply common best practices and avoid common pitfalls like unnecessary state management or useEffect usage
---
# Writing React Components
We're using modern React (19+) and we're following common best practices focused on
clarity, correctness, and maintainability.
## Component Structure & Style
- **PREFER** small, focused components with a single responsibility
- **PREFER** named `function` components over arrow functions
- Exception: anonymous callbacks, inline render props, and closures
- **PREFER** explicit return types and props typing (TypeScript) where applicable
- Keep components flat and readable; avoid deeply nested JSX
- Group related logic together (event handlers, derived values, helpers)
## State Management
- **AVOID** `useEffect()`
- See the ["You Might Not Need An Effect" guide](references/you-dont-need-useeffect.md) for detailed guidance
- **PREFER** deriving values during render instead of synchronizing state
- Fetch data via TanStack Query (`@tanstack/react-query`)
- **AVOID** unnecessary `useState()` or `useReducer()` usage
- Derive state from props or other state when possible
- Localize state to the lowest possible component
- **DO NOT** mirror props in state unless absolutely necessary
- Prefer controlled components over syncing uncontrolled state
## Rendering & Derivation
- **PREFER** computing derived values inline or via helper functions
- Use `useMemo()` sparingly and only for proven performance issues
- **AVOID** premature optimization
- Keep render logic deterministic and free of side effects
## Event Handling
- **AVOID** in-line event handlers in JSX
- **PREFER**:
```tsx
function handleClick() {
// ...
}
;
```
- Over:
```tsx