react-patterns

To separate business logic from React UI components, use custom hooks as a glue layer to call domain use cases, while restricting components to rendering props, managing local UI state, and displaying loading or error states.

Context-based dependency injection in React uses Context to inject dependencies into custom hooks, allowing hooks to call use cases and domain services without tight coupling, which enables framework-agnostic architecture and clean domain boundaries.

Yes, these React UI layer separation patterns apply across React and React Native apps, allowing you to build generic components and domain-bound hooks that enable reusable UI layers and framework-agnostic transitions.

Build scalable React components by designing pure generic UI building blocks with no business logic, then composing them with domain hooks and context-based dependency injection to maintain clean separation of concerns.

Custom hooks should handle React-specific side effects when they act as the glue layer to the domain, transforming domain data for UI, managing async state, and calling domain services via injected dependencies.