Перерахуйте всі бібліотеки, які використовували у зв’язці з React.

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

Що це і навіщо

React – бібліотека для побудови UI, а додаткові інструменти розширюють її функціональність: керування станом, маршрутизація, стилізація, тестування.

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

• State management: Redux Toolkit (зручний API, RTK Query), Zustand (легковаговий store), React Query (дані/кеш).
• Routing: React Router.
• UI‑kit: Material‑UI, Ant Design, Chakra UI – готові компоненти.
• CSS: styled-components, Emotion (CSS‑in‑JS), Tailwind CSS (utility‑first).
• Forms: Formik, Yup (валидація), React Hook Form (hook‑based).
• Testing: Jest + React Testing Library, Cypress (end‑to‑end), Storybook (документація компонентів).

Як це працює

Бібліотеки інтегруються через npm/yarn, імпортуються у компоненти. State‑managers пропонують hooks (useSelector, useDispatch, useStore). UI‑kit надає готові компоненти з пропсами. Тестові фреймворки працюють над рендером компонентів у віртуальному DOM.

Практика і реалізація

import { configureStore } from '@reduxjs/toolkit';
const store = configureStore({ reducer: rootReducer });

import { useForm } from 'react-hook-form';
const { register, handleSubmit } = useForm();

Тестування

import { render, screen } from '@testing-library/react';
test('renders button', () => {
  render(<Button>Click</Button>);
  expect(screen.getByText(/click/i)).toBeInTheDocument();
});

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

Компоненти розділяються на атоми, молекули, організми (Atomic Design). State‑managers вибираються за складністю: Redux Toolkit для глобального стану, Zustand – простіші випадки.

Безпека і приватність

Валідація форм (Yup, React Hook Form) запобігає XSS. Для API‑запитів використовується fetch з заголовками CORS, а також бібліотека axios із інтерцепторами.

Оптимізація

Lazy loading компонентів (React.lazy, Suspense), memoization (React.memo, useMemo) та оптимізація запитів (React Query cache). Tailwind CSS мінімізує розмір CSS.

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

• MobX – реактивний state‑manager, простіший API.
• SWR – альтернатива React Query з меншою конфігурацією.
• Bootstrap – інший UI‑kit, більш традиційний CSS.

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

1. Не використовувати Provider для Redux → state недоступний.
2. Занадто глибока вкладка useSelector → перерендеринг.
3. Відсутність ключа у списку компонентів → React warning.
4. Неправильна конфігурація jest → моки не працюють.
5. Відсутність key у React Hook Form → втрата контролю.
6. Перевантаження сторінки великою кількістю компонентів → збільшує bundle.
7. Необмежені запити до API → throttling.
8. Відсутність strict режиму TS → типові помилки не виявляються.

Cheatsheet

• npm i @reduxjs/toolkit react-redux – Redux Toolkit.
• npm i zustand – Zustand.
• npm i react-query – React Query.
• npm i @mui/material @emotion/react @emotion/styled – Material‑UI.
• npm i tailwindcss postcss autoprefixer – Tailwind CSS.
• npm i formik yup react-hook-form – Forms.
• npm i jest @testing-library/react @testing-library/jest-dom – Testing.
• npm i cypress – E2E.
• npm i storybook @storybook/react – Storybook.