React Best Practices

Best practices for writing clean React code.

Component Structure

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

State Management

// 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!