Trong React 19, team React đã giới thiệu một hook mới tên là useEffectEvent nhằm giải quyết một vấn đề rất phổ biến khi làm việc với useEffect: stale closure và việc phải thêm quá nhiều dependency vào mảng dependency.

Hook này giúp tách logic phản ứng theo state ra khỏi logic của effect, giúp code sạch hơn và tránh việc effect bị chạy lại không cần thiết.

Vấn đề phổ biến với `useEffect`

Giả sử ta có một effect tạo kết nối websocket:

useEffect(() => {
  const connection = createConnection(serverUrl, roomId)

  connection.on("message", () => {
    showNotification("New message", theme)
  })

  connection.connect()

  return () => connection.disconnect()
}, [roomId, theme])

Ở đây có một vấn đề:

theme chỉ dùng để hiển thị notification
Nhưng khi theme thay đổi, effect bị chạy lại
Điều này khiến connection reconnect không cần thiết

Vì React phải đảm bảo closure luôn lấy giá trị mới nhất của theme.

Giải pháp trước React 19

Trước đây ta thường dùng useRef:

const themeRef = useRef(theme)

useEffect(() => {
  themeRef.current = theme
})

useEffect(() => {
  const connection = createConnection(serverUrl, roomId)

  connection.on("message", () => {
    showNotification("New message", themeRef.current)
  })

  connection.connect()

  return () => connection.disconnect()
}, [roomId])

Cách này hoạt động, nhưng có nhiều vấn đề:

Khó đọc
Không rõ ràng về intent
Không phải pattern chính thức của React

`useEffectEvent` trong React 19

useEffectEvent cho phép bạn tạo một event function chỉ dùng bên trong effect, nhưng luôn truy cập được state và props mới nhất mà không cần thêm vào dependency array.

Ví dụ

import { useEffect, useEffectEvent } from "react"

function ChatRoom({ roomId, theme }) {
  const onMessage = useEffectEvent(() => {
    showNotification("New message", theme)
  })

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId)

    connection.on("message", onMessage)

    connection.connect()

    return () => connection.disconnect()
  }, [roomId])
}

Điều gì xảy ra ở đây?

onMessage luôn đọc được theme mới nhất
useEffect không cần phụ thuộc vào theme
Connection không bị reconnect khi theme thay đổi

Khi nào nên dùng `useEffectEvent`?

Hook này đặc biệt hữu ích khi:

1. Event trong effect cần state mới nhất

Ví dụ:

websocket events
event listener
subscriptions
timers

2. Bạn không muốn effect chạy lại

Ví dụ:

reconnect websocket
re-subscribe listener
restart animation

Ví dụ với `setInterval`

Cách cũ

useEffect(() => {
  const id = setInterval(() => {
    console.log(count)
  }, 1000)

  return () => clearInterval(id)
}, [count])

Interval sẽ bị reset mỗi lần count đổi.

Với `useEffectEvent`

const log = useEffectEvent(() => {
  console.log(count)
})

useEffect(() => {
  const id = setInterval(log, 1000)
  return () => clearInterval(id)
}, [])

Interval chỉ tạo một lần, nhưng vẫn đọc được count mới nhất.

Quy tắc quan trọng

useEffectEvent chỉ được gọi bên trong effect.

Không nên dùng nó như event handler bình thường:

❌ Sai:

<button onClick={onMessage} />

✔ Đúng:

chỉ dùng trong useEffect
cho logic subscription / side-effect

So sánh nhanh

Pattern	Vấn đề
dependency array đầy đủ	effect chạy lại quá nhiều
`useRef` workaround	code khó hiểu
`useEffectEvent`	giải pháp chính thức

Kết luận

useEffectEvent là một bổ sung nhỏ nhưng rất quan trọng trong React 19:

giải quyết stale closure
giảm dependency trong useEffect
tránh effect re-run không cần thiết
code rõ ràng và đúng intent hơn

Nếu bạn đang làm việc với:

websocket
event listener
interval / timeout
subscriptions

thì useEffectEvent gần như là pattern chuẩn mới cho React.

Vấn đề phổ biến với useEffect