React Best Practices

React Best Practices for Benefriches

Guidelines for React 19+ SPA with Vite + Redux

Philosophy: Code quality and maintainability first, performance optimization when measured

Adapted for: Client-side rendering with Redux + Clean Architecture

When to Apply This Skill

Use these practices when:

• Writing new React components
• Designing component architecture
• Implementing Redux patterns (reducers, selectors, thunks)
• Reviewing code for quality or performance issues
• Refactoring existing React code
• Debugging slow interactions

Categories by Priority

🔴 CRITICAL: Code Quality & Readability

Benefriches Examples

• ✅ ViewData pattern: Single selector per container
• ✅ Container/Presentational: Separation in views/ folders
• ✅ Clean Architecture: Core has no framework dependencies

🟠 HIGH: Component Design Patterns

Benefriches Already Follows

• ✅ Container components use single selectViewData selector
• ✅ Presentational components receive all data via props
• ✅ Gateway pattern for external services

🟡 HIGH: State Management Principles

Redux Specifics

• ✅ Derived values in selectors (not duplicated in state)
• ✅ Functional updates in reducers
• ✅ Single ViewData selector per container

🟢 HIGH: Anti-Patterns to Avoid

🔵 MEDIUM: Bundle Optimization

🟣 MEDIUM: Async Patterns

🟤 MEDIUM: Form Handling

Benefriches Form Pattern

// Standard form component pattern
import { useForm } from "react-hook-form";
import { Input } from "@codegouvfr/react-dsfr/Input";

type FormValues = { name: string; email: string };

function MyForm({ onSubmit }: { onSubmit: (data: FormValues) => void }) {
  const { register, handleSubmit, formState } = useForm<FormValues>();

  return (
    <form
      <Input
        label="Email"
        state={formState.errors.email ? "error" : "default"}
        stateRelatedMessage={formState.errors.email?.message}
        nativeInputProps={{
          ...register("email", {
            required: "Email requis",
            pattern: { value: /^[^@]+@[^@]+$/, message: "Email invalide" },
          }),
        }}
      />
    </form>
  );
}

Reference Files

• src/features/onboarding/views/pages/identity/CreateUserForm/CreateUserForm.tsx
• src/features/create-site/views/custom/naming/SiteNameAndDescription.tsx

⬜ MEDIUM: Accessibility

Keyboard Navigation Example

// Handle Escape key in modals/dropdowns
function Modal({ onClose, children }) {
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    document.addEventListener("keydown", handleEscape);
    return () => document.removeEventListener("keydown", handleEscape);
  }, [onClose]);

  return <div role="dialog" aria-modal="true">{children}</div>;
}

Icon Accessibility

// Decorative icons should be hidden from screen readers
<i className="fr-icon-check-line" aria-hidden="true" />

// Informative icons need labels
<button aria-label="Fermer">
  <i className="fr-icon-close-line" aria-hidden="true" />
</button>

DSFR Provides Accessibility

DSFR components handle most accessibility concerns. Rely on:

• Built-in ARIA attributes in DSFR components
• Proper focus management in modals via createModal()
• Keyboard support in form controls

⬛ CONSIDER: Error Boundaries

Error boundaries catch JavaScript errors in component trees and display fallback UI.

Basic Pattern

import { Component, ErrorInfo, ReactNode } from "react";

type Props = { children: ReactNode; fallback: ReactNode };
type State = { hasError: boolean };

class ErrorBoundary extends Component<Props, State> {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error: Error, info: ErrorInfo) {
    console.error("Error boundary caught:", error, info);
  }

  render() {
    return this.state.hasError ? this.props.fallback : this.props.children;
  }
}

// Usage
<ErrorBoundary fallback={<p>Une erreur est survenue</p>}>
  <RiskyComponent />
</ErrorBoundary>

Note: Not yet implemented in Benefriches. Consider adding for critical sections.

⚫ LOW: Performance Optimization (Measure First!)

CRITICAL: Only apply these when you've measured a performance problem.

Memoization: Usually NOT Needed

Default stance: Don't memoize. It adds complexity without benefit in most cases.

Better Alternatives to Memoization

1. Move state down: Keep state in component that needs it
2. Lift content up: Use children pattern for static content
3. Component composition: Split into smaller, focused pieces
4. Selector optimization: Derive booleans in selectors

React Compiler (Coming Soon)

React Compiler will auto-memoize, making manual useMemo, useCallback, and React.memo largely redundant. Avoid adding new memoization unless solving a measured problem.

⚪ React 19 & Future

Benefriches-Specific Integration

Redux Patterns

Already following best practices:

• ✅ Derived state in selectors (not duplicated)
• ✅ Single ViewData selector per container
• ✅ Functional updates in reducers
• ✅ toSorted() for immutability

Keep doing:

• 🟡 Single selector per container returning composed ViewData
• 🔴 Parallel async in thunks with Promise.all()
• 🟢 Passive action names (events: stepCompleted, not commands)

Clean Architecture

• Core layer: Pure functions, no framework deps
• Infrastructure layer: Gateways with InMemory mocks for tests
• Views layer: Container/Presentational separation

Path Aliases

• 🔴 Use @/ for imports - avoid barrel files
• Example: import { X } from '@/features/create-site/core/createSite.reducer'

See Also

• Code examples: examples.md in this skill directory
• Web app guide: apps/web/CLAUDE.md
• Monorepo guide: Root CLAUDE.md

END OF QUICK REFERENCE - For code examples and detailed patterns, see examples.md.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.