skills.rest
ahonn
ahonnCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-best-practices

Apply React best practices for code review and performance optimization.

62|2|Updated Feb 21, 2017
Search Tags:#performance#react#best-practices#code-review#ssr#memoization
One-click install
npx skills add https://github.com/ahonn/dotfiles --skill react-best-practices-ahonn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/ahonn/dotfiles/tree/main/.claude/skills/react-best-practices
Command: npx skills add https://github.com/ahonn/dotfiles --skill react-best-practices-ahonn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Developers often struggle to apply consistent React patterns across reviews and projects. This Skill consolidates proven best practices from react.dev and Vercel Engineering into actionable guidance.

Core Features & Use Cases

  • Quick-reference decision trees for common React issues like performance, re-renders, and SSR flicker.
  • Curated rules and patterns with pointers to in-depth references for deeper learning.
  • Contextual prompts and concise instructions to accelerate code reviews and refactoring.

Quick Start

Run the guide to review a React component for re-renders, effects, and bundle size optimization.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
How do I identify and fix React re-render issues during a code review?▼

Identify React re-render issues by applying quick-reference decision trees for performance tuning and memoization. This provides concrete rules to evaluate component effects and complex state logic, ensuring consistent patterns during code reviews.

What is the best way to apply React performance optimization and memoization patterns?▼

The best way to apply React performance optimization is using curated rules consolidated from react.dev and Vercel Engineering. You get actionable guidance and pointers to in-depth references for implementing memoization and bundle analysis patterns.

How do I debug SSR flicker and optimize bundle size in React projects?▼

Debug SSR flicker and optimize bundle size by running this guide to review your React components. It offers decision trees for common SSR issues and bundle size optimization, providing quick, repeatable guidance for React projects.

Can I use this for writing complex state logic and effects across React projects?▼

Yes, you can use this for writing effects and complex state logic across React projects. It provides contextual prompts and concise instructions to accelerate code reviews and refactoring for these specific React patterns.

Do I need specific dependencies to apply these React best practices?▼

No dependencies are required to apply these React best practices. The Skill operates independently to provide frontmatter-driven metadata, concrete rules, and embedded references for quick guidance during code reviews and performance tuning.

Related Skills

Explore More Software Engineering Skills→
k2worksk2works

operating-qt

Set up SonarQube locally with Docker and run Gulp scan tasks.

Community
Intermediate
phuonghxphuonghx
1

nextjs-react-expert

Optimize Next.js and React applications for data fetching, bundle size, and rendering performance.

Community
Advanced
maslennikov-igmaslennikov-ig
2

code-reviewer

Automate pull-request code review across six languages with structured reports.

Community
Advanced
stratagastrataga

vercel-react-best-practices

Identify performance patterns and optimization opportunities in React/Next.js projects.

Community
Advanced