**IMPORTANT**: This project uses modern state management patterns. `useEffect` should be avoided in almost all cases.
Sign in to like and favorite skills
IMPORTANT: This project uses modern state management patterns.
useEffectFor any data fetching, server state, or API calls:
// ✅ CORRECT - Use TanStack Query import { useQuery, useMutation } from '@tanstack/react-query'; const { data, isLoading } = useQuery({ queryKey: ['key'], queryFn: async () => fetch('/api/endpoint').then(res => res.json()), refetchInterval: 10000, }); const mutation = useMutation({ mutationFn: async (data) => fetch('/api/endpoint', { method: 'POST', body: JSON.stringify(data) }), onSuccess: () => queryClient.invalidateQueries({ queryKey: ['key'] }), });
// ❌ WRONG - Do not use useEffect for data fetching useEffect(() => { fetch('/api/endpoint').then(/* ... */); }, []);
For any real-time data, WebSocket/SSE streams, or client state:
// ✅ CORRECT - Use Zustand store import { create } from 'zustand'; export const useMarketStore = create((set) => ({ tickers: new Map(), isConnected: false, connectStream: (assets) => { /* ... */ }, }));
useEffect is ONLY acceptable in these rare cases:
Third-party library integration where the library requires DOM manipulation or imperative API:
// ✅ OK - Chart library requires DOM ref useEffect(() => { const chart = createChart(containerRef.current, options); return () => chart.remove(); }, []);
Browser API subscriptions that can't be managed by Zustand:
// ✅ OK - Listening to browser events useEffect(() => { const handleResize = () => { /* ... */ }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []);
If you're tempted to use useEffect, ask yourself:
// ✅ CORRECT import { useState } from 'react'; import { Card } from '@/components/ui/card'; import { useQuery } from '@tanstack/react-query'; export function Component() { // component code }
// ❌ WRONG export function Component() { import { something } from 'somewhere'; // NEVER DO THIS }
/src/app/api/supabase/migrations/supabaseAdmin'use client'; import { useQuery } from '@tanstack/react-query'; export function DataComponent() { const { data, isLoading, error } = useQuery({ queryKey: ['data'], queryFn: fetchData, }); if (isLoading) return <div>Loading...</div>; if (error) return <div>Error: {error.message}</div>; return <div>{data}</div>; }
'use client'; import { useMarketStore } from '@/lib/stores/market-store'; export function LiveComponent() { const { tickers, isConnected } = useMarketStore(); return <div>{tickers.get('btcusdt')?.price}</div>; }