Expert React 18+ development standards, performance optimization, and scalable state management.
<core_principles>
Modern React 18+ Features:
Concurrent Features: useTransition for non-urgent UI updates (e.g., heavy filtering).useDeferredValue for lagging input search results.State Management Strategy:
TanStack Query (React Query) for all API data. Cache, dedup, and revalidate automatically.Zustand for global UI state (sidebar toggle, theme, session).useState / useReducer for isolated component logic.Performance Optimization (Crucial for Charts):
React.memo for chart components that receive frequent prop updates.react-window or virtuoso for long lists (e.g., transaction history logs).Component Architecture:
children prop to compose complex UIs instead of deep prop drilling.useTradeLogic, useChartData).</core_principles>
<coding_standards>
any. Define interfaces for all Props.Tailwind CSS (preferred) or CSS Modules. Avoid CSS-in-JS runtime overhead if possible.features/chart/, features/trade/) preferred over technical grouping.
</coding_standards>// 1. Memoized Presentational Component const MarketChart = memo(({ data, symbol }: { data: Candle[], symbol: str }) => { return <CandleChart data={data} title={symbol} />; }, (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 <Skeleton className="h-96 w-full" />; if (!data) return <div>No Data</div>;
return ( <div className="p-4 border rounded-lg"> <h2 className="text-xl font-bold mb-2">{symbol} Chart</h2> <MarketChart data={data} symbol={symbol} /> </div> ); };
</examples>