useEffect without dependencies and stale closures

Reactmid

A colleague is building a new chat component: subscribe to messages by roomId, an input, and send. Works in manual testing, but the reviewer has seen this bug in other projects. Open the diff and find why switching rooms breaks the chat.

PR: lesson.tsx +31 −04 проблем

1-// ChatRoom.tsx — new component

1+import { useEffect, useState } from 'react'

2+import { subscribeToRoom, sendMessage } from './chatApi'

3+

4+interface Props {

5+ roomId: string

6+ currentUser: { id: string; name: string }

7+}

8+

9+export function ChatRoom({ roomId, currentUser }: Props) {

10+ const [messages, setMessages] = useState<string[]>([])

11+ const [input, setInput] = useState('')

12+

13+ useEffect(() => {

14+ const unsubscribe = subscribeToRoom(roomId, (msg) => {

15+ setMessages([...messages, msg])

16+ })

17+ return () => unsubscribe()

18+ }, [])

19+

20+ const handleSend = () => {

21+ sendMessage(roomId, currentUser.id, input)

22+ setInput('')

23+ }

24+

25+ return (

26+ <div>

27+ {messages.map((m, i) => <div key={i}>{m}</div>)}

28+ <input value={input} onChange={(e) => setInput(e.target.value)} />

29+ <button onClick={handleSend}>Send</button>

30+ </div>

31+ )

32+}

Шаг 1 из 6

Where to hunt for bugs in hooks

When reviewing a React component, always look at: 1. **useEffect dependency arrays** — complete? Any stale closures? 2. **setState in callbacks** — using functional updates? 3. **Effect cleanup** — are subscriptions/timers properly cleaned up? 4. **Props used inside the effect** — all in deps? Read the code and try to find what exactly breaks when switching rooms.

ArchCase

ArchCase

useEffect without dependencies and stale closures

Where to hunt for bugs in hooks