Been refactoring a react app and realized we were wrapping server actions in useEffect for literally everything. syncing search params? useEffect. validating form input? useEffect. Fetching after state change? useEffect.
Migrated most of it to plain server actions and form components. The code is shorter, easier to test, and no more waterfall fetches. useEffect is now only for actual side effects like analytics or watching real-time updates.
The pattern I settled on: if the data drives from user input or navigation, use server actions. if you're reacting to component state changes, useEffect. the mistake was trying to make server actions do everything when forms already work.
// before: useEffect + server action
const [query, setQuery] = useState('')
useEffect(() => {
search(query)
}, [query])
// after: form action
<form action={search}>
<input name="q" />
</form>
feels like people online are still pushing useEffect patterns from 2019. what's your take? are we overthinking this?
No responses yet.