react-best-practices

Apply React best practices to TypeScript and JavaScript components.

Updated Aug 23, 2026

Search Tags:#typescript #react #hooks #best-practices #refs #effects #component-design

Ready to run

npx skills add https://github.com/samzzi/dotfiles --skill react-best-practices-samzzi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/samzzi/dotfiles/tree/main/config/claude/skills/react-best-practices
Command: npx skills add https://github.com/samzzi/dotfiles --skill react-best-practices-samzzi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams building React apps often converge on inconsistent patterns, which leads to fragile components and hard maintenance. This guide provides clear rules for hooks, effects, and refs to improve readability and reliability across codebases.

Core Features & Use Cases

Escape hatches and anti-patterns: use effects judiciously and prefer render-time computations where possible.
Ref guidance and component design: best practices for controlled vs uncontrolled components, and robust custom hooks.
Use Case: refactor legacy React components to align with predictable patterns and safer state management.

Quick Start

Audit your existing components and apply the recommended patterns to ensure effects are used correctly, refs are stable, and hooks are composed for predictable behavior.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema

What are React best practices for managing effects and state in components?▼

React best practices for effects involve using them judiciously and preferring render-time computations. This enforces correct effect usage and proper dependency management to keep components predictable and maintainable.

How do I refactor legacy React components to use safer patterns?▼

Refactor legacy React components by applying clear rules for hooks, effects, and refs. Audit existing code to ensure effects are used correctly, refs are stable, and hooks are composed for predictable behavior and safer state management.

Does this React best practices guidance work with TypeScript codebases?▼

Yes, this guidance applies across both TypeScript and JavaScript React codebases (.tsx/.jsx). It enforces safety and quality requirements by ensuring correct effect usage and focused custom hooks in either environment.

When should I use refs instead of state in React component design?▼

Use refs in React component design when managing uncontrolled components or needing stable references. This guidance provides best practices for controlled versus uncontrolled components and robust custom hook composition.

What is the best way to structure custom hooks for predictable behavior?▼

The best way to structure custom hooks is to keep them focused and properly composed. This ensures predictable behavior by enforcing correct dependency management and robust hook design patterns across your application.