skills.rest
moughamir
moughamirCOMMUNITY
Explore all skills by this author →
Website𝕏@omnizyaGitHub

react-optimise

Optimize React applications by reducing re-renders and bundle size.

Updated Mar 26, 2026
Search Tags:#performance#react#data fetching#profiling#core web vitals#react compiler#bundle optimization
One-click install
npx skills add https://github.com/moughamir/justwaitit-review --skill react-optimise-moughamir
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-optimise
Source: https://github.com/moughamir/justwaitit-review/tree/main/.agents/skills/react-optimise
Command: npx skills add https://github.com/moughamir/justwaitit-review --skill react-optimise-moughamir

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

React applications often feel slow due to unnecessary re-renders, bloated bundles, inefficient data fetching, and poor Core Web Vitals—especially when changes are made without a performance strategy.

Core Features & Use Cases

  • React Compiler mastery: Use compiler-friendly, side-effect-free rendering patterns, detect silent bailouts, and adopt incrementally without breaking correctness.
  • Bundle & rendering performance: Apply tree-shaking-friendly imports, route-level code splitting, dynamic imports, virtualization, stable keys, and memo-friendly prop patterns to reduce work on the critical path.
  • Data fetching & Core Web Vitals: Avoid waterfalls with parallelization, abort stale requests, use stale-while-revalidate, and optimize INP/LCP/CLS using practical browser hints and instrumentation.
  • Profiling & memory management for long-lived apps: Profile with production builds, read flame charts/React tracks, and prevent retention via cleanup, cancellation, and heap snapshot workflows.

Quick Start

Ask an AI to refactor your React components and fetch logic to eliminate unnecessary re-renders, reduce bundle size, and improve Core Web Vitals by following the highest-impact rules in react-optimise.

Frequently Asked Questions about react-optimise

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

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

Reduce unnecessary React re-renders by adopting compiler-friendly, side-effect-free patterns, stable keys, and memo-friendly props to minimize redundant work on the critical rendering path.

What is the React Compiler and how do I avoid silent bailouts?▼

The React Compiler optimizes rendering automatically, but silent bailouts occur with unsafe patterns. Avoid them by using side-effect-free rendering logic and rule-driven guidance to ensure the compiler can safely apply optimizations without breaking correctness.

How do I optimize Core Web Vitals like INP and LCP in a React single-page app?▼

Optimize React Core Web Vitals by parallelizing data fetching, aborting stale requests, using stale-while-revalidate, and applying browser hints with route-level code splitting to improve INP and LCP.

What is the best way to profile memory retention issues in long-lived React applications?▼

Profile memory retention in long-lived React apps using production builds, flame charts, and React tracks, while preventing leaks via cleanup, cancellation, and heap snapshot workflows.

How can I shrink my React bundle size with tree-shaking and code splitting?▼

Shrink React bundle size using tree-shaking-friendly imports, route-level code splitting, and dynamic imports to reduce JavaScript loaded on the critical path.

Can I incrementally adopt React Compiler patterns without breaking existing components?▼

Yes, you can incrementally adopt React Compiler patterns without breaking existing components by following rule-driven guidance for compiler bailouts and ensuring effect and cancellation safety to maintain correctness.

Related Skills

Explore More Software Engineering Skills→
hung14vnnhung14vnn

react-performance

Identify and fix performance bottlenecks in React applications using React DevTools Profiler.

Community
Advanced
carayacaraya
1

javascript-performance

Analyze JavaScript performance with profiling, memory analysis, and event loop diagnostics.

Community
Advanced
pproencapproenca
193

react-optimise

Optimize React application performance through architectural guidelines and techniques.

Community
Advanced
djankiesdjankies

optimizing-with-react-compiler

Leverage React Compiler to auto-memoize components and guide manual memoization decisions.

Community
Advanced