🔥 React: useEffect с async-функцией — антипаттерн!

Многие пишут так:

useEffect(() => {
  async function fetchData() {
    const res = await fetch('/api/data')
    const json = await res.json()
    setData(json)
  }

  fetchData()
}, [])

useEffect(() => {
  const controller = new AbortController()

  fetch('/api/data', { signal: controller.signal })
    .then(res => res.json())
    .then(setData)
    .catch(err => {
      if (err.name !== 'AbortError') console.error(err)
    })

  return () => controller.abort()
}, [])

Frontend разработчик

🔥 React: useEffect с async-функцией — антипаттерн!

Многие пишут так:

useEffect(() => {
  async function fetchData() {
    const res = await fetch('/api/data')
    const json = await res.json()
    setData(json)
  }

  fetchData()
}, [])

💥 Это работает, но неявно. Возникают проблемы:
- нет отмены запроса при анмаунте;
- сложно обрабатывать race conditions;
- нельзя обрабатывать ошибки на уровне useEffect.

✅ Лучше — использовать AbortController и обычную функцию:

useEffect(() => {
  const controller = new AbortController()

  fetch('/api/data', { signal: controller.signal })
    .then(res => res.json())
    .then(setData)
    .catch(err => {
      if (err.name !== 'AbortError') console.error(err)
    })

  return () => controller.abort()
}, [])

🧠 Профит:
- безопасное отключение;
- контроль ошибок;
- читаемый код.

👉 @frontend_1

hottg.com/frontend_1/3959

1.8K viewsApr 21 at 20:49