Menu

Post image 1
Post image 2
Post image 3
1 / 3
0

Stop Using useEffect Like This: 5 Patterns That Are Silently Breaking Your React App

DEV Community·Gavin Cettolo·28 days ago
#WWCaJCJk
#pattern#why#bonus#before#fullscreen#user
Reading 0:00
15s threshold

I was doing a code review for a colleague when I found it. The component had five useEffect hooks. No errors. No warnings in the console. The PM had signed off on it. It had been in production for three months. But there was a subtle bug that only showed up when the user navigated quickly between pages. Data would flash. State would reset. Sometimes the old user's name would appear for a split second before updating to the new one. Three hours later, we traced it back to a single misused useEffect . That's the thing about this hook: it fails silently, in slow motion, and always at the worst moment. TL;DR useEffect is the most misused hook in React and most bugs that seem "mysterious" trace back to it. Five specific patterns are responsible for 90% of the problems: derived state, overloaded effects, stale closures, unstructured fetches, and unnecessary usage. React 18's Strict Mode adds a layer of complexity that catches many of these bugs in development, if you know what to look for.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More