react-typescript-clean-code

Name: react-typescript-clean-code
Availability: InStock
Author: AdelysAlberto

Enforces clean architecture, judicious hook usage, and performance patterns in React TypeScript code.

1|Updated Jul 18, 2025

Search Tags:#typescript #code review #performance #refactoring #react #hooks #clean architecture

Ready to run

npx skills add https://github.com/AdelysAlberto/md-configs-and-agents --skill react-typescript-clean-code-adelysalberto

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-typescript-clean-code
Source: https://github.com/AdelysAlberto/md-configs-and-agents/tree/main/agents-copilot/skills/react-typescript-clean-code
Command: npx skills add https://github.com/AdelysAlberto/md-configs-and-agents --skill react-typescript-clean-code-adelysalberto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React and TypeScript codebases often accumulate over-engineered hooks, unnecessary memoization, derived state bugs, and premature optimization that hurt readability and performance. This Skill provides a concrete engineering standard to review and write frontend code that stays simple, typed, and fast. ## Core Features & Use Cases - Hook Diagnostics: Decision tables for when to use or avoid useEffect, useMemo, and useCallback, with anti-pattern and corrected code examples. - Performance Patterns: Guidance on list virtualization with @tanstack/react-virtual and route-based code-splitting with React.lazy and Suspense. - Strict Typing Rules: Zero-any policy, discriminated unions over enums, descriptive prop interfaces, and a Result pattern for services. - Use Case: When reviewing a pull request where a developer wrapped every variable in useMemo and fetched data inside useEffect, apply this Skill to refactor toward render-time calculations and TanStack Query. ## Quick Start Review my React TypeScript component using the clean code standards and refactor any unnecessary hooks or derived state.

Frequently Asked Questions about react-typescript-clean-code

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

FAQPage Schema

When should I use useEffect in React?▼

Use useEffect only to synchronize with external systems like DOM events, WebSockets, timers, or canvas, always with a cleanup function. Never use it for derived state, event handling, or data fetching; calculate during render, use event handlers, or TanStack Query instead.

When is useMemo actually necessary in React?▼

useMemo is justified for expensive computations over large datasets (roughly 1,000+ elements or O(n²) work) or to preserve referential equality for React.memo children and hook dependencies. Trivial operations like string concatenation or array length should never be memoized.

Should I wrap every callback in useCallback?▼

No. useCallback only helps when the function is passed to a React.memo-wrapped child or appears in another hook's dependency array. Callbacks passed to native HTML elements or unmemoized children gain nothing and add memory and readability overhead.

How do I handle data fetching in React without useEffect?▼

Use TanStack Query instead of manual useEffect fetching. It handles caching, deduplication, request cancellation, and retries automatically, removing the need for loading-state effects and abort logic in components.

What is the best way to render large lists in React?▼

Use list virtualization with @tanstack/react-virtual on the web or @shopify/flash-list in React Native when rendering more than 50-100 items. Virtualization delivers far larger performance gains than micro-optimizations with useMemo.

Should I use enums or union types in TypeScript?▼

Prefer discriminated string literal unions like 'active' | 'inactive' over enums. They are type-safe, tree-shakeable, and avoid the runtime footprint and numeric coercion pitfalls of TypeScript enums.