import React, { useState } from 'react';

const [stateVariable, setStateVariable] = useState(initialValue);

const [count, setCount] = useState(0); // Число
const [name, setName] = useState('Alice'); // Строка
const [isActive, setIsActive] = useState(false); // Булево
const [user, setUser] = useState({ id: 1, name: 'Bob' }); // Объект
const [items, setItems] = useState([]); // Массив

// Увеличить счетчик
setCount(count + 1);

// Изменить имя
setName('Charlie');

// Переключить булево
setIsActive(!isActive);

// Обновить объект (важно: создавайте новый объект!)
setUser({ ...user, name: 'David' });

// Добавить элемент в массив (важно: создавайте новый массив!)
setItems([...items, 'New Item']);

setCount(prevCount => prevCount + 1);

function MyComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
      <input type="text" value={text} onChange={e => setText(e.target.value)} />
      <p>Текст: {text}</p>
    </div>
  );
}

className={cn(
    'bg-slate-100',{
    '!bg-slate-200': isActive,
})}

className={cn('bg-slate-100', 'active:bg-slate-200')}

function throttle(fn: Function, delay: number) {
  let last = 0;
  return (...args: any[]) => {
    const now = Date.now();
    if (now - last >= delay) {
      last = now;
      fn(...args);
    }
  };
}

function debounce(fn: Function, delay: number) {
  let timeout: ReturnType<typeof setTimeout>;
  return (...args: any[]) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
}

function deepClone<T>(obj: T): T {
  return JSON.parse(JSON.stringify(obj));
}

Подходит для простых объектов, не содержащих функций, дат и т.п.

function get<T>(obj: any, path: string, fallback?: T): T {
  return path.split('.').reduce((acc, key) => acc?.[key], obj) ?? fallback;
}

function wait(ms: number) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function uuidv4() {
  return crypto.randomUUID(); // нативно в современных браузерах
}

async function copyToClipboard(text: string) {
  try {
    await navigator.clipboard.writeText(text);
  } catch {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
  }
}

function onClickOutside(element: HTMLElement, callback: () => void) {
  function handler(event: MouseEvent) {
    if (!element.contains(event.target as Node)) {
      callback();
    }
  }
  document.addEventListener('click', handler);
  return () => document.removeEventListener('click', handler); // для очистки
}

function downloadBlob(blob: Blob, filename: string) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

function loadScript(src: string): Promise<void> {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    script.onload = () => resolve();
    script.onerror = () => reject(new Error(`Failed to load ${src}`));
    document.head.appendChild(script);
  });
}