react-patterns

Separate UI from business logic in React apps with components, hooks, and DI.

1|Updated Jan 13, 2023

Search Tags:#ui #architecture #frontend #react #hooks #patterns #dependency-injection

Ready to run

npx skills add https://github.com/theodrosyimer/.dotfiles --skill react-patterns-theodrosyimer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-patterns
Source: https://github.com/theodrosyimer/.dotfiles/tree/main/claude/skills/dev__react
Command: npx skills add https://github.com/theodrosyimer/.dotfiles --skill react-patterns-theodrosyimer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

React/React Native UI patterns with components, custom hooks, and dependency injection. Use when building React components, creating hooks, or implementing UI layer separation. Covers component-only presentation logic, hooks as glue layer to domain, Context-based DI, and framework-agnostic architecture.

Core Features & Use Cases

Generic Components: Pure UI building blocks with no business logic, reusable across app.
Domain Components Must Only: Render UI elements based on props/state; call hooks to execute domain use cases; display loading and error states; manage local UI state.
Custom Hooks Must Only: Inject dependencies via Context; call use cases and domain services; handle React-specific side effects; transform domain data for UI; manage async state.

Quick Start

Design a reusable React UI layer by composing generic components, domain hooks, and context-based DI.

Frequently Asked Questions about react-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I separate business logic from UI components in React?▼

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.

What is context-based dependency injection in React?▼

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.

Can I use the same React UI architecture patterns for React Native?▼

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.

How do I build scalable React components with clean separation of concerns?▼

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.

When should custom hooks handle side effects in a React UI architecture?▼

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.