How can I improve my Largest Contentful Paint (LCP)?

The skill suggests using route-level code splitting, preloading on hover, and utilizing React Suspense boundaries to stream content progressively.

When should I use React.memo or useMemo?

This skill advises only memoizing when you have profiling evidence. useMemo should be reserved for expensive computations exceeding 1ms with stable dependencies.

What is waterfall elimination?

Waterfall elimination replaces sequential async awaits with parallel Promise.all calls or early-fetch patterns to reduce total data loading time by up to 10x.

Does this skill support the React Compiler?

Yes, if the React Compiler is detected, the skill recommends removing manual memoization (like useMemo and useCallback) to reduce code noise and let the compiler handle it.

How does this skill help with RTK Query performance?

It provides patterns for using selectFromResult to ensure components only re-render when their specific data slice changes, along with optimal cache time configurations.

React Performance Optimization

Name: React Performance Optimization
Author: surfertas

bysurfertas

0•

开发者工具

Optimizes React and Redux Toolkit applications using advanced memoization, code splitting, and rendering patterns.

This skill provides specialized guidance for improving the performance and responsiveness of React and Redux Toolkit (RTK) applications. It offers expert implementation patterns for effective memoization, eliminating network waterfalls through parallelized async operations, and tuning RTK Query cache settings. By following these best practices, developers can optimize Core Web Vitals such as LCP and INP, manage bundle sizes via dynamic imports, and ensure efficient component rendering using modern React features like Suspense and the React Compiler.

主要功能

01Evidence-based memoization rules for React.memo, useMemo, and useCallback

02Bundle size reduction through route-level and component-level code splitting

030 GitHub stars

04RTK Query cache tuning and selectFromResult optimization for minimal re-renders

05Rendering performance patterns including content-visibility and hydration flicker prevention

06Waterfall elimination techniques to parallelize independent async operations

使用场景

01Improving Core Web Vitals scores for better user experience and SEO

02Optimizing server-side performance by converting sequential awaits to parallel execution

03Reducing unnecessary re-renders in data-heavy React dashboards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add surfertas/claude-react-rtk performance

For use in Claude.ai and ChatGPT

Download Skill