Які патерни використовуєте разом з React?

Повне пояснення

Що це і навіщо

• React‑hook‑based state management дозволяє керувати станом компонентів без зовнішніх бібліотек, зберігаючи простоту і типобезпеку.
• Context API використовується для передачі даних, що потрібні багатьом компонентам (наприклад, тема UI або користувацькі налаштування).
• useReducer підходить, коли логіка оновлення стану складна або залежить від попереднього стану.
• React.memo / useMemo запобігають зайвим рендерингам, що важливо для продуктивності.
• Custom hooks (наприклад, useAuth, useFetch) інкапсулюють логіку і роблять її переиспользуваною.
• TanStack Query (раніше React Query) забезпечує кешування, автоматичне оновлення і синхронізацію асинхронних даних.

Ключові принципи/терміни

• Hook – функція, що починається з use, яка використовує React‑state і lifecycle.
• Context – об’єкт, що дозволяє передавати дані через дерево компонентів без пропс‑передач.
• Reducer – чиста функція, що приймає попередній стан і дію, повертаючи новий стан.
• Memoization – збереження результату функції, щоб не виконувати її заново при тих самих аргументах.
• Custom hook – власний Hook, який комбінує інші Hooks і логіку.

Як це працює

1. useState/useReducer зберігають локальний стан.
2. Context.Provider обгортає дерево, передаючи значення через value.
3. React.memo обгортає компонент, порівнюючи пропси за допомогою shallow‑сравнения.
4. useEffect виконує побічні ефекти після рендеру.
5. Custom hook викликає інші Hooks і повертає готові дані/функції.
6. TanStack Query кешує відповіді, автоматично оновлює їх при зміні ключа.

Практика і реалізація (JS/TS)

// useAuth.ts
import { useState, useEffect } from 'react';
export function useAuth() {
  const [user, setUser] = useState<User | null>(null);
  useEffect(() => {
    fetch('/api/me').then(r=>r.json()).then(setUser);
  }, []);
  return user;
}

// ThemeContext.tsx
import { createContext, useState } from 'react';
export const ThemeContext = createContext<'light' | 'dark'>('light');
export function ThemeProvider({children}) {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Counter.tsx
import { useReducer } from 'react';
const reducer = (state, action) => {
  switch(action.type){
    case 'inc': return state + 1;
    case 'dec': return state - 1;
    default: return state;
  }
};
export function Counter(){
  const [count, dispatch] = useReducer(reducer, 0);
  return <div>{count}</div>;
}

Тестування

• Unit: Jest + React Testing Library для перевірки рендеру і логіки Hooks.
• Integration: Testing Library + MSW (Mock Service Worker) для симуляції API‑запитів.
• E2E: Playwright для перевірки взаємодії користувача з UI.

Дизайн‑рішення

• Використовую React.lazy + Suspense для розвантаження компонентів.
• Для глобального стану, коли потрібна складна логіка, застосовую Zustand або Redux Toolkit.

Оптимізація

• Memoization (React.memo, useMemo) зменшує кількість рендерів.
• React Query кешує дані, зменшуючи кількість запитів.
• Code‑splitting за допомогою React.lazy зменшує розмір бандла.

Безпека

• Валідація даних на стороні сервера, а також у Zod/yup в клієнті.
• Захист CSRF через токени у заголовках.

Альтернативи

• Redux: підходить для великих додатків з багатьма взаємодіями.
• MobX: реактивний підхід, але менш популярний у сучасному React‑екосистемі.
• Recoil: простий API для глобального стану, але менш стабільний.

Часті помилки

1. Неправильне використання useEffect → без залежностей виконується щоразу.
2. Занадто глибока Context‑пропаганда → використовуйте useContext лише там, де потрібно.
3. Відсутність ключів у списках → key важливий для оптимізації.
4. Необхідність обробки асинхронних помилок → використовуйте try/catch або useQuery.
5. Перевантаження компоненту через непотрібні пропси → застосовуйте React.memo.
6. Використання setState у useEffect без cleanup → може призвести до memory leaks.
7. Неправильне об’єднання useState і useReducer → вибирайте один підхід.
8. Відсутність типів у TS → використовуйте React.FC<Props> і типи для state.

Cheatsheet

• useState – простий локальний стан.
• useReducer – складний стан з діями.
• useContext – глобальний контекст.
• React.memo – мемоізація компоненту.
• useEffect – побічні ефекти.
• useQuery (TanStack Query) – асинхронний запит з кешуванням.
• React.lazy + Suspense – розвантаження компоненту.