skills.rest
IoT-VN
IoT-VNCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-best-practices

Optimizes React and Next.js apps' speed via code structure, bundle reduction, and render/data-flow tuning.

Updated Feb 19, 2026
Search Tags:#performance#react#optimization#next.js#client-side#server-side#bundle
One-click install
npx skills add https://github.com/IoT-VN/lavida --skill react-best-practices-iot-vn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/IoT-VN/lavida/tree/main/.opencode/skills/react-best-practices
Command: npx skills add https://github.com/IoT-VN/lavida --skill react-best-practices-iot-vn

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses performance bottlenecks and inefficiencies in React and Next.js applications, helping developers reduce load times and improve user experience.

Core Features & Use Cases

  • Identify and eliminate waiting chains in data fetching and API routes to prevent slow sequential operations.
  • Optimize bundle size by recommending direct imports, dynamic loading, and preload strategies.
  • Enhance server performance via caching, parallel fetches, and minimizing serialization.
  • Improve client-side rendering by sharing event listeners, deduplicating requests with SWR, and controlling re-renders.
  • Refine rendering and animation to utilize hardware acceleration, static hoisting, and content visibility.
  • Assist in code maintainability through lazy state initialization, stable callbacks, and avoiding stale closures.

Quick Start

Use this skill to improve the startup time and runtime efficiency of your React and Next.js projects. Simply instruct it to analyze your codebase for common performance pitfalls and apply best practices.

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 my React and Next.js bundle size?▼

To optimize React bundle size, use direct imports, dynamic loading, and preload strategies. This reduces the initial payload by loading non-critical resources only when needed, improving overall load times.

What is the best way to fix slow sequential data fetching in Next.js?▼

The best way to fix slow data fetching is to eliminate waiting chains by using parallel fetches. This prevents sequential operations from blocking each other, significantly enhancing server performance.

How do I control unnecessary React re-renders on the client side?▼

Control React re-renders by deduplicating requests with SWR, sharing event listeners, and using stable callbacks. This prevents redundant processing and improves runtime efficiency.

Why does my Next.js application have slow server response times?▼

Slow Next.js server response times often stem from poor caching, excessive serialization, or sequential API calls. Minimize serialization and implement caching to streamline server operations.

When do I need to use hardware acceleration for React animations?▼

Use hardware acceleration for React animations when you need smooth rendering flow. It works alongside static hoisting and content visibility to refine visual performance without dropping frames.

Related Skills

Explore More Software Engineering Skills→
tienchinh21tienchinh21

react-discovery

Detect React stack and map components, routes, and relationships.

Community
Intermediate
msichtermanmsichterman

expo-deployment

Automate Expo app builds, submissions, and web hosting via EAS.

Community
Intermediate
partme-aipartme-ai
610

webpack

Configure Webpack bundlers with loaders, plugins, and code splitting.

Official
Intermediate
somachaksomachak

debugging-react-rendering

Diagnose rendering performance issues in React and Next.js applications.

Community
Intermediate