react-best-practices

Optimize React and Next.js applications with Vercel Engineering performance guidelines.

1|Updated Dec 20, 2018

Search Tags:#code quality #performance #web development #react #optimization #next.js

Ready to run

npx skills add https://github.com/parkerhendo/home-config --skill react-best-practices-parkerhendo

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses performance bottlenecks in React and Next.js applications, ensuring code is efficient, fast, and scalable.

Core Features & Use Cases

Performance Optimization: Provides guidelines for eliminating waterfalls, reducing bundle size, and optimizing server/client rendering.
Code Refactoring: Guides developers in improving existing React/Next.js code for better performance.
Use Case: When reviewing a Next.js page that loads slowly, consult this Skill to identify and fix issues like large bundle sizes or inefficient data fetching.

Quick Start

Apply the react-best-practices skill to optimize the data fetching in the 'UserProfile' component.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema

How do I optimize React and Next.js application performance?▼

To optimize React and Next.js performance, you can eliminate data waterfalls, reduce bundle size, and improve server-side and client-side rendering efficiency using established Vercel Engineering best practices.

What is the best way to reduce bundle size in a Next.js application?▼

Reducing bundle size in a Next.js application involves analyzing your imports and applying Vercel Engineering best practices to refactor code, ensuring efficient server-side rendering and minimal client-side bloat.

How do I eliminate data fetching waterfalls in React components?▼

Eliminating data fetching waterfalls in React components requires restructuring your data fetching logic to run in parallel and optimizing server-side rendering, guided by automated refactoring best practices.

Why does my Next.js page load slowly and how can I fix it?▼

A slow Next.js page load is often caused by large bundle sizes or inefficient data fetching waterfalls; you can fix it by applying performance optimization guidelines to improve server and client rendering efficiency.

Can I use these React performance guidelines to refactor existing code?▼

Yes, you can use these React performance guidelines to refactor existing code, as they provide comprehensive instructions for automated refactoring and generating optimized code for better application speed.

When should I optimize server-side rendering versus client-side rendering in React?▼

You should optimize server-side rendering versus client-side rendering in React based on your performance bottlenecks, using guidelines that target rendering efficiency and re-render optimization for scalable applications.