React: состояние и useState

import { useState } from 'react'

export function BrokenCounter() {
  let count = 0

  function handleClick() {
    count = count + 1 // значение меняется, но React об этом не знает
  }

  return <button onClick={handleClick}>Сломанный счётчик: {count}</button>
}

export function Counter() {
  const [count, setCount] = useState(0)

  function addThreeWrong() {
    // в этом рендере count — снимок, например 0: трижды «заменить на 1»
    setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
  }

  function addThree() {
    // функции обновления выстраиваются в очередь: 0 → 1 → 2 → 3
    setCount((c) => c + 1)
    setCount((c) => c + 1)
    setCount((c) => c + 1)
  }

  return (
    <div>
      <p>Счётчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={addThreeWrong}>+3 со снимком</button>
      <button onClick={addThree}>+3 через функцию</button>
    </div>
  )
}

  function addToCart(id: string) {
    const line = cart.find((l) => l.id === id)
    if (line) {
      line.qty += 1 // меняем объект, который лежит в состоянии
    } else {
      cart.push({ id, qty: 1 }) // меняем сам массив состояния
    }
    setCart(cart) // тот же массив: React сравнит через Object.is и пропустит рендер
  }

  function addToCart(id: string) {
    setCart((prev) =>
      prev.some((line) => line.id === id)
        ? prev.map((line) => (line.id === id ? { ...line, qty: line.qty + 1 } : line))
        : [...prev, { id, qty: 1 }],
    )
  }

<input value={promo} onChange={(e) => setPromo(e.target.value.trim().toUpperCase())} />

export interface MenuItem {
  id: string
  name: string
  price: number // тенге
}

export interface CartLine {
  id: string // ссылка на MenuItem, а не копия объекта
  qty: number
}

export const menu: MenuItem[] = [
  { id: 'cappuccino', name: 'Капучино', price: 1600 },
  { id: 'latte', name: 'Латте', price: 1800 },
  { id: 'cheesecake', name: 'Чизкейк', price: 2400 },
]

export const PROMO_CODE = 'AUTUMN'
export const PROMO_PERCENT = 10

import type { MenuItem } from '../data/menu.ts'

interface MenuProps {
  items: MenuItem[]
  onAdd: (id: string) => void
}

export function Menu({ items, onAdd }: MenuProps) {
  return (
    <ul className="menu">
      {items.map((item) => (
        <li key={item.id}>
          {item.name} — {item.price} ₸{' '}
          <button onClick={() => onAdd(item.id)}>В корзину</button>
        </li>
      ))}
    </ul>
  )
}

import type { CartLine, MenuItem } from '../data/menu.ts'

interface CartProps {
  lines: CartLine[]
  items: MenuItem[]
  onChangeQty: (id: string, delta: number) => void
  onRemove: (id: string) => void
}

export function Cart({ lines, items, onChangeQty, onRemove }: CartProps) {
  if (lines.length === 0) {
    return <p>Корзина пуста</p>
  }

  return (
    <ul className="cart">
      {lines.map((line) => {
        const item = items.find((i) => i.id === line.id)
        if (!item) return null
        return (
          <li key={line.id}>
            {item.name}
            <button aria-label={`Меньше: ${item.name}`} onClick={() => onChangeQty(line.id, -1)}>
              −
            </button>
            <span aria-label={`Количество: ${item.name}`}>{line.qty}</span>
            <button aria-label={`Больше: ${item.name}`} onClick={() => onChangeQty(line.id, 1)}>
              +
            </button>
            {item.price * line.qty} ₸
            <button onClick={() => onRemove(line.id)}>Удалить</button>
          </li>
        )
      })}
    </ul>
  )
}

import { useState } from 'react'
import { Cart } from './components/Cart.tsx'
import { Menu } from './components/Menu.tsx'
import { menu, PROMO_CODE, PROMO_PERCENT, type CartLine } from './data/menu.ts'

function App() {
  // состояние живёт в общем родителе Menu и Cart
  const [cart, setCart] = useState<CartLine[]>([])
  const [promo, setPromo] = useState('')

  function addToCart(id: string) {
    setCart((prev) =>
      prev.some((line) => line.id === id)
        ? prev.map((line) => (line.id === id ? { ...line, qty: line.qty + 1 } : line))
        : [...prev, { id, qty: 1 }],
    )
  }

  function changeQty(id: string, delta: number) {
    setCart((prev) =>
      prev
        .map((line) => (line.id === id ? { ...line, qty: line.qty + delta } : line))
        .filter((line) => line.qty > 0),
    )
  }

  function removeLine(id: string) {
    setCart((prev) => prev.filter((line) => line.id !== id))
  }

  // производные значения считаем при рендере, а не храним в состоянии
  const subtotal = cart.reduce((sum, line) => {
    const item = menu.find((i) => i.id === line.id)
    return item ? sum + item.price * line.qty : sum
  }, 0)
  const promoApplied = promo === PROMO_CODE
  const discount = promoApplied ? Math.round((subtotal * PROMO_PERCENT) / 100) : 0
  const total = subtotal - discount

  return (
    <main>
      <h1>Кофейня</h1>
      <Menu items={menu} onAdd={addToCart} />

      <h2>Корзина</h2>
      <Cart lines={cart} items={menu} onChangeQty={changeQty} onRemove={removeLine} />

      <label>
        Промокод{' '}
        <input value={promo} onChange={(e) => setPromo(e.target.value.trim().toUpperCase())} />
      </label>
      {promoApplied && <p>Скидка {PROMO_PERCENT}%: −{discount} ₸</p>}
      <p>
        <strong>Итого: {total} ₸</strong>
      </p>
    </main>
  )
}

export default App

npm create vite@latest coffee-cart -- --template react-ts
cd coffee-cart
npm install
npm install -D vitest jsdom @testing-library/react @testing-library/dom @testing-library/user-event

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { describe, expect, it } from 'vitest'
import App from './App.tsx'
import { BrokenCounter, Counter } from './components/Counter.tsx'

describe('счётчики', () => {
  it('обычная переменная не вызывает перерисовку', async () => {
    const user = userEvent.setup()
    render(<BrokenCounter />)
    await user.click(screen.getByRole('button'))
    expect(screen.getByRole('button').textContent).toBe('Сломанный счётчик: 0')
  })

  it('состояние — снимок: +3 со снимком прибавляет 1, через функцию — 3', async () => {
    const user = userEvent.setup()
    render(<Counter />)
    await user.click(screen.getByRole('button', { name: '+3 со снимком' }))
    expect(screen.getByText('Счётчик: 1')).toBeTruthy()
    await user.click(screen.getByRole('button', { name: '+3 через функцию' }))
    expect(screen.getByText('Счётчик: 4')).toBeTruthy()
  })
})

describe('корзина', () => {
  it('добавляет, меняет количество, удаляет и считает итог', async () => {
    const user = userEvent.setup()
    render(<App />)
    const addButtons = screen.getAllByRole('button', { name: 'В корзину' })

    await user.click(addButtons[0]) // Капучино
    await user.click(addButtons[0])
    await user.click(addButtons[2]) // Чизкейк
    expect(screen.getByLabelText('Количество: Капучино').textContent).toBe('2')
    expect(screen.getByText('Итого: 5600 ₸')).toBeTruthy()

    await user.click(screen.getByRole('button', { name: 'Меньше: Чизкейк' }))
    expect(screen.queryByLabelText('Количество: Чизкейк')).toBeNull()
    expect(screen.getByText('Итого: 3200 ₸')).toBeTruthy()

    await user.click(screen.getByRole('button', { name: 'Удалить' }))
    expect(screen.getByText('Корзина пуста')).toBeTruthy()
    expect(screen.getByText('Итого: 0 ₸')).toBeTruthy()
  })

  it('управляемое поле: промокод приводится к верхнему регистру и даёт скидку', async () => {
    const user = userEvent.setup()
    render(<App />)
    await user.click(screen.getAllByRole('button', { name: 'В корзину' })[1]) // Латте
    await user.type(screen.getByLabelText('Промокод'), 'autumn')
    expect(screen.getByLabelText<HTMLInputElement>('Промокод').value).toBe('AUTUMN')
    expect(screen.getByText('Скидка 10%: −180 ₸')).toBeTruthy()
    expect(screen.getByText('Итого: 1620 ₸')).toBeTruthy()
  })
})

$ npm test

> coffee-cart@0.0.0 test
> vitest run

 RUN  v5.0.3 …/coffee-cart

 Test Files  1 passed (1)
      Tests  4 passed (4)