benefriches-react-best-practices

React best practices and performance optimization for Benefriches (Vite + Redux). Reference when writing components, implementing Redux patterns, reviewing code quality, or optimizing performance.

الانتقال إلى التثبيت

المستودع: diegosouzapw/awesome-omni-skill
آخر نشاط في المصدر: ٢٨ فبراير ٢٠٢٦ في ٠٣:٥٥
لغة SKILL.md المكتشفة: الإنجليزية
النجوم: ٥٠
التفرعات: ١٩

خيارات التثبيت

يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.

npx skills add https://github.com/diegosouzapw/awesome-omni-skill --skill benefriches-react-best-practices

يبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.

تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.

مراجعة ملفات المصدر

اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.

مستكشف الملفات

2 ملفات

SKILL.md

تعليمات المصدر · معاينة للقراءة فقط

العودة إلى البحث العودة إلى التثبيت

name	benefriches-react-best-practices
description	React best practices and performance optimization for Benefriches (Vite + Redux). Reference when writing components, implementing Redux patterns, reviewing code quality, or optimizing performance.

React Best Practices for Benefriches

Performance optimization guidelines for React 19+ SPA with Vite + Redux

Based on: Vercel React Best Practices

Adapted for: Client-side rendering only

When to Apply This Skill

Use these practices when:

✅ Writing new React components
✅ Implementing Redux thunks or selectors
✅ Reviewing code for performance issues
✅ Refactoring existing React code
✅ Optimizing bundle size
✅ Improving rendering performance
✅ Debugging slow interactions or waterfalls

Rule Categories by Priority

Priority	Category	Rules	Impact
🔴	Bundle Size	4	200-800ms import cost reduction
🟠	Async/Waterfall	4	2-10× improvement
🟡	Array/Data	2	Fast-fail + immutability
🟢	Re-render	12	Prevent unnecessary renders
🔵	Bundle (Continued)	2

Rule	Impact	Relevance
Avoid Barrel File Imports	200-800ms import cost	Check `@/features` imports
Dynamic Imports for Heavy Comp.	Reduce initial bundle	Lazy-load maps, forms, charts
Promise.all() for Independence	2-10× parallel speedup	Redux thunks fetching multiple resources
Dependency-Based Parallelization	Start async ops ASAP	Complex thunks with multiple dependencies

Rule	Impact	Relevance
Defer Await Until Needed	Avoid blocking code paths	Conditional logic in thunks
Strategic Suspense Boundaries	Show wrapper UI immediately	Feature pages with async requirements
Conditional Module Loading	Load heavy libs on demand	Charts, PDFs, advanced map features
CSS content-visibility	~10× faster for long lists	Site lists, project tables

Rule	Impact	Relevance
Early Length Check	Fast-fail expensive ops	Redux selectors, form validation
Use toSorted() Instead of sort()	Immutability (critical!)	ALL sorting in reducers/selectors

Rule	Impact	Relevance
Calculate Derived State in Render	Avoid redundant state	Redux selectors
Extract to Memoized Components	Enable early returns	Heavy presentational components
Functional setState Updates	Prevent stale closures	Already followed via Redux
Lazy State Initialization	Compute expensive values once	Local state with complex init
Use Transitions for Non-Urgent Updates	Maintain UI responsiveness	Search/filter inputs
Use useRef for Transient Values	Avoid re-renders	Animation values, scroll positions
Narrow Effect Dependencies	Reduce effect re-runs	Extract specific values from objects
Put Logic in Event Handlers	Avoid state + effect modeling	Forms, user interactions
Subscribe to Derived State	Boolean from continuous values	Redux selectors for UI state
Defer State Reads to Usage Point	Read dynamic state in callbacks	Event handlers
Don't Wrap Simple Expressions	Avoid over-optimization	Simple calculations
Extract Default Non-primitive Params	Preserve memoization	Memoized component props

Rule	Impact	Relevance
Defer Non-Critical Libraries	Load after initialization	Analytics, error tracking
Preload Based on User Intent	Reduce perceived latency	Heavy modals, project forms

benefriches-react-best-practices

خيارات التثبيت

مراجعة ملفات المصدر

React Best Practices for Benefriches

When to Apply This Skill

Rule Categories by Priority

React Best Practices for Benefriches

When to Apply This Skill

Rule Categories by Priority

Quick Reference by Category

🔴 CRITICAL: Bundle Size Optimization

🟠 HIGH: Async/Waterfall Optimization

🟡 MEDIUM-HIGH: Array/Data Optimization

🟢 MEDIUM: Re-render Optimization

🔵 MEDIUM: Bundle Optimization (Continued)

🟣 MEDIUM: Client Data Patterns

⚫ LOW-MEDIUM: Rendering Performance

⚪ LOW-MEDIUM: JavaScript Performance

🔘 LOW: Advanced Patterns

Benefriches-Specific Integration

Redux Patterns

Clean Architecture Integration

Path Aliases (`@/`)

See Also

Rule	Impact	Relevance
Passive Event Listeners	Eliminate scroll delay	Infinite scroll, animations
Version + Minimize localStorage	Prevent breaks, reduce	Redux persistence, preferences

Rule	Impact	Relevance
Hoist Static JSX	Avoid re-creation	Empty states, error messages
Use Activity Component for Visibility	Preserve state/DOM	Toggle forms/maps
Explicit Conditional Rendering	Prevent rendering 0	Count displays
useTransition Over Manual Loading	Built-in pending state	Replace useState loading flags
Optimize SVG Precision	Reduce file size	Map icons, illustrations
Animate SVG Wrapper	Hardware acceleration	Spinning icons

Rule	Impact	Relevance
Cache Repeated Function Calls	Module-level Maps	Area calculations, transformations
Build Index Maps	O(1) vs O(n) lookups	Redux selectors by ID
Use Set/Map for Lookups	O(1) membership checks	Selected IDs, uniqueness filtering
Avoid Layout Thrashing	Batch DOM reads/writes	Animations, dynamic layouts
Cache Property Access in Loops	Hot path optimization	Array iterations
Cache Storage API Calls	Avoid repeated reads	localStorage access
Combine Array Iterations	Single loop vs multiple	Chained filter/map operations
Early Return from Functions	Skip unnecessary work	Validation functions
Hoist RegExp Creation	Don't create in render	Email validation, parsing
Loop for Min/Max vs Sort	O(n) vs O(n log n)	Finding extremes

Rule	Impact	Relevance
Initialize App Once	Module-level guards	Redux store, analytics setup
Store Event Handlers in Refs	Stable subscriptions	Event bus listeners

benefriches-react-best-practices

معلومات المصدر

خيارات التثبيت

مراجعة ملفات المصدر

المزيد من هذا المستودع

المزيد من هذا المستودع

React Best Practices for Benefriches

When to Apply This Skill

Rule Categories by Priority

React Best Practices for Benefriches

When to Apply This Skill

Rule Categories by Priority

Quick Reference by Category

🔴 CRITICAL: Bundle Size Optimization

🟠 HIGH: Async/Waterfall Optimization

🟡 MEDIUM-HIGH: Array/Data Optimization

🟢 MEDIUM: Re-render Optimization

🔵 MEDIUM: Bundle Optimization (Continued)

🟣 MEDIUM: Client Data Patterns

⚫ LOW-MEDIUM: Rendering Performance

⚪ LOW-MEDIUM: JavaScript Performance

🔘 LOW: Advanced Patterns

Benefriches-Specific Integration

Redux Patterns

Clean Architecture Integration

Path Aliases (@/)

See Also

Path Aliases (`@/`)