react-patterns

Guide React 18 component patterns, hooks, and performance optimization.

18|8|Updated May 31, 2023

Search Tags:#typescript #performance #react #hooks #patterns #component composition

Ready to run

npx skills add https://github.com/jpmorgan-payments/embedded-finance --skill react-patterns-jpmorgan-payments

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-patterns
Source: https://github.com/jpmorgan-payments/embedded-finance/tree/main/.github/skills/react-patterns
Command: npx skills add https://github.com/jpmorgan-payments/embedded-finance --skill react-patterns-jpmorgan-payments

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to modern React 18 best practices, helping developers write cleaner, more maintainable, and performant React code.

Core Features & Use Cases

Component Patterns: Guidance on functional components and composition.
Hook Best Practices: Deep dive into custom hooks, data fetching with React Query, and form handling with react-hook-form.
Performance Optimization: Techniques like memoization and React.memo.
Error Handling: Implementing error boundaries and API error alerts.
Use Case: When building a new feature, consult this Skill to ensure your components are structured correctly, hooks are implemented efficiently, and potential errors are gracefully handled.

Quick Start

Use the react-patterns skill to generate a functional component with explicit props and a custom hook.

Frequently Asked Questions about react-patterns

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

FAQPage Schema

What's the best way to structure React 18 functional components and custom hooks?▼

React 18 performance optimization relies on memoization techniques and React.memo to prevent unnecessary re-renders. Applying these strategies ensures your functional components only re-render when their props change, keeping complex UIs fast.

How do I handle API data fetching and form validation in React with TypeScript?▼

Handle API data fetching and form validation in React by integrating React Query with custom hooks for state management, and react-hook-form for validation. This combination provides robust error handling and type-safe data flows within your TypeScript components.

How do you implement error boundaries for API error alerts in modern React applications?▼

Implement error boundaries in modern React by wrapping component trees to catch JavaScript errors and display fallback UIs. You can then trigger API error alerts when data fetching fails, ensuring graceful error handling throughout your application.

When should I use React context patterns for state management instead of custom hooks?▼

Use React context patterns for state management when you need to pass data deeply through the component tree without prop drilling. Custom hooks are better for encapsulating reusable stateful logic, while context provides a broader scope for shared application state.

Do I need TypeScript to use React 18 component composition and optimization techniques?▼

TypeScript is not strictly required to use React 18 component composition and optimization techniques, but it is highly recommended. Using TypeScript provides explicit props typing and compile-time safety, which significantly enhances the maintainability of your custom hooks and components.