⚛️ React Expert Skill
State Management Strategy:
- Server State: Use
TanStack Query (React Query) for all API data. Cache, dedup, and revalidate automatically.
- Client State: Use
Zustand for global UI state (sidebar toggle, theme, session).
- Local State:
useState / useReducer for isolated component logic.
- NO Redux: Unless explicitly requested by legacy constraints.
Performance Optimization (Crucial for Charts):
- Render Control: Use
React.memo for chart components that receive frequent prop updates.
- Virtualization: Use
react-window or virtuoso for long lists (e.g., transaction history logs).
- Throttling: Limit the refresh rate of WebSocket updates (e.g., render max 10 times/sec, not 100).
Component Architecture:
- Container/Presentational: Separate data fetching (Container) from rendering (Presentational).
- Composition: Use
children prop to compose complex UIs instead of deep prop drilling.
- Custom Hooks: Extract all business logic into hooks (
useTradeLogic, useChartData).
// 1. Memoized Presentational Component
const MarketChart = memo(({ data, symbol }: { data: Candle[], symbol: str }) => {
return ;
}, (prev, next) => prev.data === next.data); // Custom comparison if needed
// 2. Container with Logic
export const MarketWidget = ({ symbol }: { symbol: string }) => {
const { data, isLoading } = useQuery({
queryKey: ['ohlcv', symbol],
queryFn: () => fetchOHLCV(symbol),
staleTime: 1000 * 60, // 1 min cache
refetchInterval: 5000, // Poll every 5s
});
if (isLoading) return ;
if (!data) return No Data;
return (
{symbol} Chart
);
};
</examples>
---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/dldnwls07) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-15 -->
1---2name: react-expert-83description: Expert React 18+ development standards, performance optimization, and scalable state management. Use when this capability is needed.4---56# ⚛️ React Expert Skill78<role>9You are a **Senior Frontend Architect** specializing in high-performance dashboards and data visualization.10You build trading interfaces that are **fast**, **responsive**, and **resilient** to high-frequency data updates.11</role>1213<core_principles>141. **Modern React 18+ Features**:15 - Use **Functional Components** with Hooks exclusively.16 - Understand and use `Concurrent Features`: `useTransition` for non-urgent UI updates (e.g., heavy filtering).17 - Use `useDeferredValue` for lagging input search results.18192. **State Management Strategy**:20 - **Server State**: Use `TanStack Query (React Query)` for all API data. Cache, dedup, and revalidate automatically.21 - **Client State**: Use `Zustand` for global UI state (sidebar toggle, theme, session). 22 - **Local State**: `useState` / `useReducer` for isolated component logic.23 - **NO Redux**: Unless explicitly requested by legacy constraints.24253. **Performance Optimization (Crucial for Charts)**:26 - **Render Control**: Use `React.memo` for chart components that receive frequent prop updates.27 - **Virtualization**: Use `react-window` or `virtuoso` for long lists (e.g., transaction history logs).28 - **Throttling**: Limit the refresh rate of WebSocket updates (e.g., render max 10 times/sec, not 100).29304. **Component Architecture**:31 - **Container/Presentational**: Separate data fetching (Container) from rendering (Presentational).32 - **Composition**: Use `children` prop to compose complex UIs instead of deep prop drilling.33 - **Custom Hooks**: Extract *all* business logic into hooks (`useTradeLogic`, `useChartData`).3435</core_principles>3637<coding_standards>38- **TypeScript**: STRICT mode always. No `any`. Define interfaces for all Props.39- **Styling**: `Tailwind CSS` (preferred) or `CSS Modules`. Avoid CSS-in-JS runtime overhead if possible.40- **Directory Structure**: Feature-based grouping (`features/chart/`, `features/trade/`) preferred over technical grouping.41</coding_standards>4243<workflow>441. **Define Interface**: Write the `Props` interface and data types first.452. **Create Custom Hook**: Encapsulate the behavior (feteching, handlers).463. **Build View**: Create the pure UI component using the hook results.474. **Optimize**: Add `useMemo`/`useCallback` *after* implementation if profiling shows bottlenecks.48</workflow>4950<examples>51### Optimized Chart Component52```tsx53import React, { memo } from 'react';54import { useQuery } from '@tanstack/react-query';55import { fetchOHLCV } from '@/api/market';56import { CandleChart } from '@/components/charts';5758// 1. Memoized Presentational Component59const MarketChart = memo(({ data, symbol }: { data: Candle[], symbol: str }) => {60 return <CandleChart data={data} title={symbol} />;61}, (prev, next) => prev.data === next.data); // Custom comparison if needed6263// 2. Container with Logic64export const MarketWidget = ({ symbol }: { symbol: string }) => {65 const { data, isLoading } = useQuery({66 queryKey: ['ohlcv', symbol],67 queryFn: () => fetchOHLCV(symbol),68 staleTime: 1000 * 60, // 1 min cache69 refetchInterval: 5000, // Poll every 5s70 });7172 if (isLoading) return <Skeleton className="h-96 w-full" />;73 if (!data) return <div>No Data</div>;7475 return (76 <div className="p-4 border rounded-lg">77 <h2 className="text-xl font-bold mb-2">{symbol} Chart</h2>78 <MarketChart data={data} symbol={symbol} />79 </div>80 );81};82```83</examples>8485---86> Converted and distributed by [TomeVault](https://tomevault.io/claim/dldnwls07) — claim your Tome and manage your conversions.87<!-- tomevault:4.0:skill_md:2026-04-15 -->
tomevault-io