Stop writing useEffect for data fetching. Use Request Strategies instead.

Scott Hu Posted on May 30 Stop writing useEffect for data fetching. Use Request Strategies instead. # webdev # javascript # tutorial # react ⚠️ 【Draft – Pending Review】 Stop writing useEffect for data fetching. Use Request Strategies instead. I've been a React developer for about three years. And for most of that time, I wrote data fetching the same way everyone else did: useEffect (() => { fetch ( ' /api/users ' ) . then ( res => res . json ()) . then ( setData ) . catch ( setError ) . finally (() => setLoading ( false )); }, []); Enter fullscreen mode Exit fullscreen mode It works. But it's not good. Every list page. Every search box. Every filter. Same pattern. And the code kept growing — loading states, error handling, debounce timers, race condition flags. A simple user list with search would easily hit 80 lines of boilerplate. Then I found alova , and I realized: I'd been fighting problems that didn't need to exist. The Before: useEffect Hell Here's what my code used to look like: // 🔴 Before: 80 lines of manual state management import { useState , useEffect , useCallback } from ' react ' ; function UserList () { const [ users , setUsers ] = useState ([]); const [ loading , setLoading ] = useState ( false ); const [ error , setError ] = useState ( null ); const [ keyword , setKeyword ] = useState ( '' ); const [ page , setPage ] = useState ( 1 ); const fetchUsers = useCallback ( async () => { setLoading ( true ); setError ( null ); try { const res = await fetch ( `/api/users?keyword= ${ keyword } &page= ${ page } &pageSize=10` ); const data = await res . json (); setUsers ( data . list ); } catch ( err ) { setError ( err . message ); } finally { setLoading ( false ); } }, [ keyword , page ]); useEffect (() => { fetchUsers (); }, [ fetchUsers ]); // Manual debounce useEffect (() => { const t = setTimeout (() => fetchUsers (), 500 ); return () => clearTimeout ( t ); }, [ keyword ]); // Manual race condition handling useEffect (()