React Best Practices

Best practices for writing clean React code.

Component Structure

```javascript // Good - Small, focused component function UserCard({ user }) { return ( <div> <h3>{user.name}</h3> <p>{user.email}</p> </div> ); } ```

State Management

```javascript // Good - Minimal state const [user, setUser] = useState(null);

// Bad - Derived state const [user, setUser] = useState(null); const [userName, setUserName] = useState(''); // Derive from user instead ```

Naming Conventions

- Components: PascalCase (UserProfile) - Functions: camelCase (handleClick) - Constants: UPPER_CASE (API_URL) - Hooks: useSomething (useAuth)

File Organization

``` src/ components/ Button/ Button.js Button.css Button.test.js hooks/ useAuth.js utils/ api.js ```

Avoid

- Inline functions in JSX (use useCallback) - Too many props (refactor) - Deep nesting (extract components) - Magic numbers (use constants)

Performance Tips

- Use React.memo wisely - Avoid inline object creation - Lazy load heavy components - Use keys correctly in lists

> Next: Learn folder structure!