useEffect: синхронизация с внешним миром и когда он не нужен

npm create vite@latest booking-search -- --template react-ts
cd booking-search
npm install
npm install -D vitest jsdom @testing-library/react @testing-library/dom
npm install -D eslint eslint-plugin-react-hooks typescript-eslint

import reactHooks from 'eslint-plugin-react-hooks'
import { defineConfig } from 'eslint/config'
import tseslint from 'typescript-eslint'

export default defineConfig([
  {
    files: ['src/**/*.{ts,tsx}'],
    languageOptions: { parser: tseslint.parser },
  },
  reactHooks.configs.flat.recommended,
])

import { useEffect, useState } from 'react'

function format(totalSeconds: number) {
  const minutes = Math.floor(totalSeconds / 60)
  const seconds = String(totalSeconds % 60).padStart(2, '0')
  return `${minutes}:${seconds}`
}

export function HoldTimer({ initialSeconds }: { initialSeconds: number }) {
  const [left, setLeft] = useState(initialSeconds)
  const expired = left <= 0

  useEffect(() => {
    if (expired) return // синхронизировать нечего: таймер больше не нужен

    const id = setInterval(() => {
      setLeft((s) => s - 1)
    }, 1000)

    return () => clearInterval(id) // очистка: при размонтировании и перед новым запуском
  }, [expired])

  return <p role="status">{expired ? 'Бронь истекла' : `Время держится ещё ${format(left)}`}</p>
}

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

  it('в StrictMode при разработке: запуск → очистка → запуск', () => {
    const setSpy = vi.spyOn(globalThis, 'setInterval')
    const clearSpy = vi.spyOn(globalThis, 'clearInterval')
    render(
      <StrictMode>
        <HoldTimer initialSeconds={60} />
      </StrictMode>,
    )
    expect(setSpy).toHaveBeenCalledTimes(2)
    expect(clearSpy).toHaveBeenCalledTimes(1)
    expect(vi.getTimerCount()).toBe(1) // в итоге работает ровно один интервал
  })

import { useEffect, useState } from 'react'
import { searchServices, type Service } from '../api/services.ts'

export function NaiveSearch() {
  const [query, setQuery] = useState('')
  const [services, setServices] = useState<Service[]>([])

  useEffect(() => {
    if (query === '') return
    // 🔴 нет очистки: кто ответил последним, тот и победил
    searchServices(query, new AbortController().signal).then(setServices)
  }, [query])

  return (
    <section>
      <label>
        Поиск услуги <input value={query} onChange={(e) => setQuery(e.target.value)} />
      </label>
      <ul>
        {services.map((service) => (
          <li key={service.id}>{service.title}</li>
        ))}
      </ul>
    </section>
  )
}

export interface Service {
  id: string
  title: string
}

export async function searchServices(query: string, signal: AbortSignal): Promise<Service[]> {
  const response = await fetch(`/api/services?q=${encodeURIComponent(query)}`, { signal })
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`)
  }
  return (await response.json()) as Service[]
}

import { useEffect, useState } from 'react'
import { searchServices, type Service } from '../api/services.ts'

type Result =
  | { query: string; services: Service[] }
  | { query: string; error: string }

export function ServiceSearch() {
  const [query, setQuery] = useState('')
  const [result, setResult] = useState<Result | null>(null)

  useEffect(() => {
    if (query === '') return

    const controller = new AbortController()

    searchServices(query, controller.signal)
      .then((services) => setResult({ query, services }))
      .catch(() => {
        if (controller.signal.aborted) return // запрос отменён нами — это не ошибка
        setResult({ query, error: 'Не удалось загрузить услуги' })
      })

    return () => controller.abort() // устаревший запрос отменяется
  }, [query])

  // «загрузка» не хранится в состоянии: это ответ не на текущий запрос
  const isLoading = query !== '' && result?.query !== query
  const current = result?.query === query ? result : null

  return (
    <section>
      <label>
        Поиск услуги <input value={query} onChange={(e) => setQuery(e.target.value)} />
      </label>
      {query === '' && <p>Начните вводить название</p>}
      {isLoading && <p>Ищем…</p>}
      {current && 'error' in current && <p role="alert">{current.error}</p>}
      {current && 'services' in current && (
        <ul>
          {current.services.map((service) => (
            <li key={service.id}>{service.title}</li>
          ))}
        </ul>
      )}
    </section>
  )
}

import { useEffect, useState } from 'react'
import type { Service } from '../api/services.ts'

// 1. Производные данные через эффект
export function FilteredList({ services, filter }: { services: Service[]; filter: string }) {
  const [visible, setVisible] = useState<Service[]>([])
  useEffect(() => {
    setVisible(services.filter((s) => s.title.includes(filter)))
  }, [services, filter])
  return <p>Найдено: {visible.length}</p>
}

// 2. Действие пользователя через эффект
export function BookButton({ serviceId }: { serviceId: string }) {
  const [booked, setBooked] = useState(false)
  useEffect(() => {
    if (booked) {
      fetch('/api/bookings', { method: 'POST', body: JSON.stringify({ serviceId }) })
    }
  }, [booked, serviceId])
  return <button onClick={() => setBooked(true)}>Записаться</button>
}

// 3. Сброс состояния при смене prop через эффект
export function ReviewForm({ serviceId }: { serviceId: string }) {
  const [text, setText] = useState('')
  useEffect(() => {
    setText('')
  }, [serviceId])
  return <textarea value={text} onChange={(e) => setText(e.target.value)} />
}

// 4. Забытая зависимость
export function PageTitle({ name }: { name: string }) {
  useEffect(() => {
    document.title = `Запись: ${name}`
  }, [])
  return null
}

$ npx eslint src/bad/Unneeded.tsx

src/bad/Unneeded.tsx
   8:5  error    Error: Calling setState synchronously within an effect can trigger cascading renders
…
>  8 |     setVisible(services.filter((s) => s.title.includes(filter)))
     |     ^^^^^^^^^^ Avoid calling setState() directly within an effect
…  react-hooks/set-state-in-effect
  28:5  error    Error: Calling setState synchronously within an effect can trigger cascading renders
…
> 28 |     setText('')
     |     ^^^^^^^ Avoid calling setState() directly within an effect
…  react-hooks/set-state-in-effect
  37:6  warning  React Hook useEffect has a missing dependency: 'name'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

✖ 3 problems (2 errors, 1 warning)

import { useEffect, useState } from 'react'
import type { Service } from '../api/services.ts'

// 1. Производные данные — вычисляем при рендере
export function FilteredList({ services, filter }: { services: Service[]; filter: string }) {
  const visible = services.filter((s) => s.title.includes(filter))
  return <p>Найдено: {visible.length}</p>
}

// 2. Действие пользователя — в обработчике события
export function BookButton({ serviceId }: { serviceId: string }) {
  const [booked, setBooked] = useState(false)

  function handleClick() {
    setBooked(true)
    fetch('/api/bookings', { method: 'POST', body: JSON.stringify({ serviceId }) })
  }

  return (
    <button onClick={handleClick} disabled={booked}>
      {booked ? 'Заявка отправлена' : 'Записаться'}
    </button>
  )
}

// 3. Сброс состояния — через key у родителя
export function ReviewForm() {
  const [text, setText] = useState('')
  return (
    <textarea aria-label="Отзыв" value={text} onChange={(e) => setText(e.target.value)} />
  )
}

export function ReviewSection({ serviceId }: { serviceId: string }) {
  return <ReviewForm key={serviceId} />
}

// 4. Все реактивные значения — в зависимостях
export function PageTitle({ name }: { name: string }) {
  useEffect(() => {
    document.title = `Запись: ${name}`
  }, [name])
  return null
}

import { act, fireEvent, render, screen } from '@testing-library/react'
import { StrictMode } from 'react'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { HoldTimer } from './components/HoldTimer.tsx'
import { ServiceSearch } from './components/ServiceSearch.tsx'

beforeEach(() => {
  vi.useFakeTimers()
})

afterEach(() => {
  vi.useRealTimers()
  vi.unstubAllGlobals()
  vi.restoreAllMocks()
})

describe('HoldTimer', () => {
  it('отсчитывает время и останавливает интервал, когда бронь истекла', () => {
    render(<HoldTimer initialSeconds={3} />)
    expect(screen.getByRole('status').textContent).toBe('Время держится ещё 0:03')

    act(() => vi.advanceTimersByTime(1000))
    expect(screen.getByRole('status').textContent).toBe('Время держится ещё 0:02')

    act(() => vi.advanceTimersByTime(2000))
    expect(screen.getByRole('status').textContent).toBe('Бронь истекла')
    expect(vi.getTimerCount()).toBe(0) // очистка сработала, интервалов не осталось
  })

  it('очищает интервал при размонтировании', () => {
    const { unmount } = render(<HoldTimer initialSeconds={60} />)
    expect(vi.getTimerCount()).toBe(1)
    unmount()
    expect(vi.getTimerCount()).toBe(0)
  })

  it('в StrictMode при разработке: запуск → очистка → запуск', () => {
    const setSpy = vi.spyOn(globalThis, 'setInterval')
    const clearSpy = vi.spyOn(globalThis, 'clearInterval')
    render(
      <StrictMode>
        <HoldTimer initialSeconds={60} />
      </StrictMode>,
    )
    expect(setSpy).toHaveBeenCalledTimes(2)
    expect(clearSpy).toHaveBeenCalledTimes(1)
    expect(vi.getTimerCount()).toBe(1) // в итоге работает ровно один интервал
  })
})

/* поддельный fetch: отвечает с задержкой и честно реагирует на AbortSignal */
function stubFetch(delays: Record<string, number>, signals: AbortSignal[]) {
  vi.stubGlobal(
    'fetch',
    vi.fn((url: string, init: RequestInit) => {
      const q = new URL(url, 'http://localhost').searchParams.get('q') ?? ''
      signals.push(init.signal!)
      return new Promise<Response>((resolve, reject) => {
        const timer = setTimeout(() => {
          const body = JSON.stringify([{ id: q, title: `Результат для «${q}»` }])
          resolve(new Response(body, { status: 200 }))
        }, delays[q] ?? 0)
        init.signal!.addEventListener('abort', () => {
          clearTimeout(timer)
          reject(new DOMException('Aborted', 'AbortError'))
        })
      })
    }),
  )
}

describe('ServiceSearch', () => {
  it('показывает ответ на последний запрос, а устаревший отменяет', async () => {
    const signals: AbortSignal[] = []
    stubFetch({ ма: 500, маникюр: 100 }, signals) // первый запрос медленнее второго
    render(<ServiceSearch />)
    const input = screen.getByLabelText('Поиск услуги')

    fireEvent.change(input, { target: { value: 'ма' } })
    fireEvent.change(input, { target: { value: 'маникюр' } })
    expect(screen.getByText('Ищем…')).toBeTruthy()

    await act(() => vi.advanceTimersByTimeAsync(600))

    expect(signals[0].aborted).toBe(true)
    expect(signals[1].aborted).toBe(false)
    expect(screen.getAllByRole('listitem').map((li) => li.textContent)).toEqual([
      'Результат для «маникюр»',
    ])
    expect(screen.queryByText('Ищем…')).toBeNull()
  })

  it('показывает ошибку, если сервер ответил не 2xx', async () => {
    vi.stubGlobal('fetch', vi.fn(async () => new Response('[]', { status: 500 })))
    render(<ServiceSearch />)
    fireEvent.change(screen.getByLabelText('Поиск услуги'), { target: { value: 'стрижка' } })
    await act(() => vi.advanceTimersByTimeAsync(0))
    expect(screen.getByRole('alert').textContent).toBe('Не удалось загрузить услуги')
  })
})

$ npm test

> booking-search@0.0.0 test
> vitest run

 RUN  v5.0.3 …/booking-search

 Test Files  3 passed (3)
      Tests  10 passed (10)