skills.rest
bgscr
bgscrCOMMUNITY
Explore all skills by this author →
GitHub

react-performance

Optimize React rendering with memoization, code-splitting, and virtualization.

Updated Jan 22, 2026
Search Tags:#performance#react#zustand#memoization#virtualization#server-components#code-splitting
One-click install
npx skills add https://github.com/bgscr/p2p_conference --skill react-performance-bgscr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-performance
Source: https://github.com/bgscr/p2p_conference/tree/main/.agent/skills/React-performance
Command: npx skills add https://github.com/bgscr/p2p_conference --skill react-performance-bgscr

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

React applications frequently suffer from unnecessary re-renders, large bundle sizes, and inefficient data handling, leading to sluggish UIs and poor user experiences.

Core Features & Use Cases

  • Rendering optimization: memoization, useMemo, useCallback, stable keys to minimize re-renders.
  • Bundle size reduction: code-splitting, lazy loading, and tree-shaking strategies for smaller initial payloads.
  • Runtime efficiency: virtualization for large lists, debouncing, and intersection observers to defer work.
  • Server boundary discipline: guidance on balancing Server Components vs Client Components for performance and security.
  • Reusable assets: a library of hooks, components, and patterns (assets/, references/) to accelerate performance tasks.

Quick Start

Begin by applying memoization and lazy loading to a heavy component, then integrate virtualization for large lists and verify improvements with profiling.

Frequently Asked Questions about react-performance

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

FAQPage Schema
How do I reduce unnecessary re-renders in a React application?▼

Reduce React re-renders by applying memoization techniques like useMemo, useCallback, and stable keys to prevent redundant component rendering. Identify bottlenecks using the React DevTools Profiler to measure rendering paths before optimizing.

What's the best way to optimize large lists in React?▼

Optimize large React lists by applying virtualization to render only visible items, significantly reducing runtime overhead. Deferring work with debouncing and intersection observers further improves list rendering efficiency.

How do I decrease bundle size in a Next.js App Router project?▼

Decrease Next.js bundle size by applying code-splitting, lazy loading, and tree-shaking strategies to minimize initial payloads. Establishing clear server and client component boundaries also balances performance and interactivity.

Does this approach work with Zustand state management?▼

Yes, these optimization workflows apply to apps built with Zustand or similar state management. Memoization and stable hooks integrate seamlessly to prevent unnecessary re-renders across your state-driven components.

How do I balance Server Components and Client Components for performance?▼

Balance Server and Client Components by enforcing clear boundaries to leverage server-side data fetching while maintaining client interactivity. This discipline reduces bundle size and optimizes security without sacrificing user experience.

Related Skills

Explore More Software Engineering Skills→
somachaksomachak

debugging-react-rendering

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

Community
Intermediate
kimgeakimgea

godot-project-foundations

Organizes Godot 4 projects with feature-based folder layouts and naming conventions.

Community
Intermediate
sandeshbagmaresandeshbagmare

nextjs-app-router-patterns

Guide Next.js 14+ App Router architecture with Server Components and data fetching.

Community
Advanced
pproencapproenca
193

react-optimise

Optimize React application performance through architectural guidelines and techniques.

Community
Advanced