presentational-components

To separate data logic from UI components in React, enforce presentational patterns where components only receive data via props and trigger actions via callbacks. This prevents direct data fetching within the UI, moving side effects into domain-focused hooks.

A domain-focused hook in React code architecture is a reusable hook named after the data domain, such as useCommunity, rather than specific UI components. This pattern cleanly separates data fetching and side effects from presentational UI rendering.

To refactor a React component to use presentational patterns, review the current architecture to ensure all data is passed via props and actions are handled by callbacks. Move existing data fetching logic out of the UI component into a dedicated domain-focused hook.

Yes, this presentational component pattern works with Convex or Clerk. It is specifically designed for refactoring React apps using frameworks like these, ensuring a clear pattern for wiring data and actions in parent components while keeping UI presentation separate.

You should use presentational components instead of fetching data directly because strict separation of concerns leads to more maintainable, testable, and reusable React code. UI components without side effects are easily testable and can be reused across different features.

You should avoid presentational components when building simple React features where the overhead of creating domain-focused hooks and passing props adds unnecessary complexity, rather than improving maintainability or code reuse for a small, self-contained UI element.