The Effects Events in React 19.2: Do not Overuse useEffect

The hook that will stop your effect from executing every time for no reason!

You’ve written this ref before. You know the one that little useRef you made just to fool an effect not to run again. Well, React 19.2 already made that trick obsolete.

The Problem® Every React Dev Has Workarounded™

This was the exact wall you slammed into if you ever built anything with chat rooms, or analytics, or subscriptions, or WebSocket connections: your useEffect needs a roomId so it can reconnect, and also reads a theme prop just to show a notification. Put theme in the dependency array, and you just wired your connection to get destroyed every time someone toggles a dark-mode. Omit it and ESLint screams at you — or worse, you ship a stale closure bug.

function ChatRoom({ roomId, theme }) {  useEffect(() => {    const connection = createConnection(roomId);    connection.on('connected', () => {      showNotification('Connected!', theme); // stale after theme changes    });    connection.connect();    return () => connection.disconnect();  }, [roomId, theme]); // theme shouldn't trigger a reconnect}

The solution for the majority of us was to do a useRefhack to keep track of [the latest] It did the job, but it was messy…

Welcome Offer

Access to everything. Now 30% off.

Unlock every single story.

Read member-only stories

Support writers you read most

Listen to audio narrations

Read offline with the Medium app

Access our Mastodon community

Connect your custom domain

Create your own publications