~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/react/22react-best-practices

# React Best Practices

Conventions keep codebases consistent and maintainable. Follow these patterns to write clean React code.

## File Structure

Organize by feature, not by type.

```
src/
  features/
    auth/
      LoginForm.jsx
      useAuth.js
      authSlice.js
    dashboard/
      Dashboard.jsx
      StatsCard.jsx
```

Avoid putting all components in one folder as the app grows.

## Naming Conventions

- **Components**: PascalCase — `UserProfile.jsx`
- **Hooks**: camelCase with `use` prefix — `useAuth.js`
- **Utils**: camelCase — `formatDate.js`
- **Constants**: UPPER_SNAKE_CASE — `MAX_RETRIES`
- **Files**: match the default export name

## Keep Components Small

Each component should do one thing.

```jsx
// BAD: One giant component
function Dashboard() {
  // 200 lines of mixed logic
}

// GOOD: Split into focused components
function Dashboard() {
  return (
    <Layout>
      <Header />
      <StatsPanel />
      <ActivityFeed />
    </Layout>
  );
}
```

## State Placement

- **Local state**: UI state like open/closed, form inputs, hover effects
- **Lifted state**: shared between siblings
- **Global state**: truly app-wide (auth, theme, cart)

Don't use global state for everything. Start local, lift when needed.

## Inline Logic

Avoid complex logic inside JSX.

```jsx
// BAD
<div>{users.filter(u => u.active).map(u => <span>{u.name.toUpperCase()}</span>)}</div>

// GOOD
const activeUsers = users.filter((u) => u.active);
return <div>{activeUsers.map((u) => <UserRow key={u.id} user={u} />)}</div>;
```

## Common Pitfalls Checklist

- Using `index` as `key` for dynamic lists
- Mutating state directly instead of creating new references
- Putting too much in a single component
- Not extracting reusable logic into custom hooks
- Inline object/array literals in JSX causing unnecessary re-renders
- Forgetting to handle loading and error states
- Mixing concerns (data fetching + presentation) in one component

## Best Practices

- One component per file
- Extract custom hooks for reusable logic
- Use TypeScript for prop validation
- Keep JSX clean — move logic above the return
- Handle all states: loading, error, empty, success
- Use `key` with stable, unique identifiers

## Common Mistakes

- Over-abstracting too early — keep it simple until patterns emerge
- Creating deeply nested component trees
- Passing too many props (split the component instead)
- Ignoring the component hierarchy when deciding state placement
- Not using dev tools to check render frequency

No changes yet

cancel