` у React з кількох причин: 1967 | 1968 | 1. **Зменшення зайвого HTML** 1969 | 1970 | - Фрагменти не додають додатковий елемент у DOM, що зменшує кількість вкладених тегів і покращує продуктивність. 1971 | 1972 | ```jsx 1973 | <> 1974 |

Title

1975 |

Text

1976 | 1977 | ``` 1978 | 1979 | - Результат у DOM: 1980 | 1981 | ```html 1982 |

Title

1983 |

Text

1984 | ``` 1985 | 1986 | - На відміну від `

`, який би додавав зайву вкладеність: 1987 | 1988 | ```html 1989 |

1990 |

Title

1991 |

Text

1992 |

1993 | ``` 1994 | 1995 | 2. **Відсутність стилістичних побічних ефектів** 1996 | 1997 | - Додатковий `

` може впливати на CSS-стилі, спричиняючи небажані зміни у верстці. Фрагменти цього уникають. 1998 | 1999 | 3. **Краща сумісність з таблицями** 2000 | 2001 | - У `` не можна безпосередньо вкладати `

`, але можна використовувати фрагменти: 2002 | 2003 | ```jsx 2004 | <> 2005 |

2006 | 2007 | 2008 | 2009 | 2010 | 2011 | 2012 | ``` 2013 | 2014 | - Це працює правильно, тоді як `

` спричинив би помилку. 2015 | 2016 | 4. **Оптимізація продуктивності** 2017 | 2018 | - Менше зайвих вузлів у DOM → швидший рендеринг та менше споживання пам’яті. 2019 | 2020 | 2021 | 2022 | ### Хуки 2023 | 2024 |

2025 |

39. Що таке Хуки (Hooks) в React?

2026 | 2027 | #### React 2028 | 2029 | - **React Хуки (Hooks)** — це функції, які дозволяють вам використовувати стан та інші можливості React без написання класів. 2030 | 2031 | #### Основні типи хуків: 2032 | 2033 | 1. **useState** — дозволяє додавати стан в функціональні компоненти. 2034 | 2035 | ```jsx 2036 | const [state, setState] = useState(initialState); 2037 | ``` 2038 | 2039 | 2. **useEffect** — дозволяє виконувати побічні ефекти (наприклад, запити до API або підписки) у функціональних компонентах. 2040 | 2041 | ```jsx 2042 | useEffect(() => { 2043 | // код для ефекту 2044 | }, [dependencies]); // залежності 2045 | ``` 2046 | 2047 | 3. **useContext** — доступ до значень контексту без необхідності використовувати компонент Consumer. 2048 | 2049 | ```jsx 2050 | const value = useContext(MyContext); 2051 | ``` 2052 | 2053 | 4. **useRef** — дозволяє створювати посилання на DOM-елементи або зберігати значення між рендерами без змін стану. 2054 | 2055 | ```jsx 2056 | const myRef = useRef(initialValue); 2057 | ``` 2058 | 2059 | 5. **useReducer** — альтернатива useState, зручна для управління складнішими станами через редуктори, подібно до Redux. 2060 | 2061 | ```jsx 2062 | const [state, dispatch] = useReducer(reducer, initialState); 2063 | ``` 2064 | 2065 | 6. **useMemo** — оптимізує обчислення значень, щоб уникнути непотрібних повторних обчислень. 2066 | 2067 | ```jsx 2068 | const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 2069 | ``` 2070 | 2071 | 7. **useCallback** — повертає мемоізовану версію функції, щоб вона не створювалась знову при кожному рендері. 2072 | 2073 | ```jsx 2074 | const memoizedCallback = useCallback(() => { 2075 | // функція; 2076 | }, [dependencies]); 2077 | ``` 2078 | 2079 | #### Основні переваги: 2080 | 2081 | - **Функціональні компоненти:** Замість класових компонентів ви можете використовувати функціональні компоненти з хуками. 2082 | 2083 | - **Покращена читабельність:** Логіка можна розділити на декілька хуків, що зменшує кількість коду та підвищує модульність. 2084 | 2085 | - **Перерозподіл логіки:** Хуки дозволяють повторно використовувати логіку в різних компонентах без створення складних ієрархій. 2086 | 2087 |

2088 | 2089 |

2090 |

40. Переваги Хуків (Hooks) в React?

2091 | 2092 | #### React 2093 | 2094 | | **Перевага** | **Опис** | 2095 | | ------------------------------------ | ---------------------------------------------------------------------------------------------- | 2096 | | **Менше коду** | Хуки дозволяють уникнути класів і скоротити обсяг коду. | 2097 | | **Краща читабельність** | Код з хуками легший для розуміння та підтримки. | 2098 | | **Повторне використання логіки** | Custom Hooks дозволяють повторно використовувати логіку між компонентами. | 2099 | | **Спрощене управління станом** | Використання `useState` і `useReducer` робить стейт-менеджмент простішим. | 2100 | | **Гнучкість у використанні ефектів** | `useEffect` дозволяє виконувати побічні ефекти без потреби в класових методах життєвого циклу. | 2101 | | **Легша міграція** | Полегшує перехід від класових компонентів до функціональних. | 2102 | 2103 |

2104 | 2105 |

2106 |

41. Недоліки Хуків (Hooks) в React?

2107 | 2108 | #### React 2109 | 2110 | | **Недолік** | **Опис** | 2111 | | -------------------------------------- | ------------------------------------------------------------------------------------------- | 2112 | | **Збільшена кількість ререндерів** | Неправильне використання хуків, особливо `useEffect`, може викликати зайві ререндери. | 2113 | | **Ускладнене розуміння логіки** | Логіка компонента може бути розпорошена між кількома `useEffect`, що ускладнює дебаг. | 2114 | | **Відсутність явного життєвого циклу** | На відміну від класових компонентів, хуки не мають чітко виражених методів життєвого циклу. | 2115 | | **Можливі проблеми з оптимізацією** | Неправильне використання `useCallback` і `useMemo` може призвести до неефективної роботи. | 2116 | | **Складність у великих проєктах** | У масштабних додатках хуки можуть ускладнювати управління станом і побічними ефектами. | 2117 | 2118 |

2119 | 2120 |

2121 |

42. Правила (обмеження) використання Хуків (Hooks) в React?

2122 | 2123 | #### React 2124 | 2125 | | **Правило** | **Опис** | 2126 | | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | 2127 | | **Використання тільки у функціях** | Хуки можна викликати лише у функціональних компонентах або в кастомних хуках. | 2128 | | **Збереження порядку виклику** | Хуки не можна викликати умовно (`if`, `for`, `while`), інакше порушиться порядок виклику. | 2129 | | **Виклик тільки на верхньому рівні** | Хуки не можна викликати всередині вкладених функцій або обробників подій. | 2130 | | **Іменування кастомних хуків** | Кастомні хуки мають починатися з `use` (наприклад, `useAuth`). | 2131 | | **Дотримання правил залежностей** | У `useEffect`, `useMemo` та `useCallback` залежності (`[]`) потрібно вказувати правильно, щоб уникнути непередбачуваної поведінки. | 2132 | 2133 |

2134 | 2135 |

2136 |

43. Що таке useReducer()?

2137 | 2138 | #### React 2139 | 2140 | - `useReducer()` — це хук у React, який використовується для управління станом у функціональних компонентах. Це альтернатива `useState()`, яка підходить для складних логік оновлення стану, особливо якщо зміни залежать від попереднього стану. 2141 | 2142 | #### Синтаксис: 2143 | 2144 | ```jsx 2145 | const [state, dispatch] = useReducer(reducer, initialState); 2146 | ``` 2147 | 2148 | - `reducer` — функція, яка приймає `state` і `action`, повертаючи новий стан. 2149 | 2150 | - `initialState` — початковий стан. 2151 | 2152 | - `dispatch` — функція для виклику редюсера з певною `action`. 2153 | 2154 | #### Приклад: 2155 | 2156 | ```jsx 2157 | import { useReducer } from "react"; 2158 | 2159 | const initialState = { count: 0 }; 2160 | 2161 | function reducer(state, action) { 2162 | switch (action.type) { 2163 | case "increment": 2164 | return { count: state.count + 1 }; 2165 | case "decrement": 2166 | return { count: state.count - 1 }; 2167 | default: 2168 | return state; 2169 | } 2170 | } 2171 | 2172 | function Counter() { 2173 | const [state, dispatch] = useReducer(reducer, initialState); 2174 | 2175 | return ( 2176 |

2177 |

Count: {state.count}

2178 | 2179 | 2180 |

2181 | ); 2182 | } 2183 | ``` 2184 | 2185 | #### Коли використовувати: 2186 | 2187 | - Коли стан має складну логіку або залежності. 2188 | 2189 | - Коли необхідно уніфікувати оновлення стану через dispatch. 2190 | 2191 | - Для масштабованості, наприклад, при використанні в глобальному стані. 2192 | 2193 |

2194 | 2195 |

2196 |

44. Розкажіть про хуки useCallback(), useMemo(), useImperativeHandle(), useLayoutEffect()?

2197 | 2198 | #### React 2199 | 2200 | #### useCallback() 2201 | 2202 | - Мемоізує функцію, щоб вона не створювалася заново при кожному рендері. Корисно для передачі колбеків у дочірні компоненти. 2203 | 2204 | - **Приклад:** 2205 | 2206 | ```jsx 2207 | import { useCallback } from "react"; 2208 | 2209 | function MyComponent({ onClick }) { 2210 | return ; 2211 | } 2212 | 2213 | function Parent() { 2214 | const handleClick = useCallback(() => { 2215 | console.log("Клік"); 2216 | }, []); // Функція створюється один раз 2217 | 2218 | return ; 2219 | } 2220 | ``` 2221 | 2222 | #### useMemo() 2223 | 2224 | - Мемоізує обчислення, щоб не виконувати їх повторно при кожному рендері, якщо залежності не змінилися. 2225 | 2226 | - **Приклад:** 2227 | 2228 | ```jsx 2229 | import { useMemo } from "react"; 2230 | 2231 | function ExpensiveCalculation({ num }) { 2232 | const result = useMemo(() => { 2233 | console.log("Обчислення..."); 2234 | return num \* 2; 2235 | }, [num]); // Виконується лише при зміні num 2236 | 2237 | return

Результат: {result}

; 2238 | } 2239 | ``` 2240 | 2241 | #### useImperativeHandle() 2242 | 2243 | - Дозволяє керувати поведінкою ref у дочірньому компоненті. Використовується разом із forwardRef(). 2244 | 2245 | - **Приклад:** 2246 | 2247 | ```jsx 2248 | import { useRef, useImperativeHandle, forwardRef } from "react"; 2249 | 2250 | const CustomInput = forwardRef((props, ref) => { 2251 | const inputRef = useRef(); 2252 | 2253 | useImperativeHandle(ref, () => ({ 2254 | focus: () => inputRef.current.focus(), 2255 | clear: () => (inputRef.current.value = ""), 2256 | })); 2257 | 2258 | return ; 2259 | }); 2260 | 2261 | function Parent() { 2262 | const inputRef = useRef(); 2263 | 2264 | return ( 2265 |

2266 | 2267 | 2268 | 2269 |

2270 | ); 2271 | } 2272 | ``` 2273 | 2274 | #### useLayoutEffect() 2275 | 2276 | - Працює як `useEffect()`, але виконується синхронно після змін в DOM. Корисно для вимірювання або маніпуляцій з DOM перед тим, як браузер малює сторінку. 2277 | 2278 | - **Приклад:** 2279 | 2280 | ```jsx 2281 | import { useLayoutEffect, useRef } from "react"; 2282 | 2283 | function LayoutEffectExample() { 2284 | const divRef = useRef(); 2285 | 2286 | useLayoutEffect(() => { 2287 | console.log("Ширина елемента:", divRef.current.offsetWidth); 2288 | }, []); 2289 | 2290 | return ( 2291 |

2292 | Елемент 2293 |

2294 | ); 2295 | } 2296 | ``` 2297 | 2298 | #### Коли який хук використовувати? 2299 | 2300 | - `useCallback()` — для запам’ятовування функцій. 2301 | 2302 | - `useMemo()` — для запам’ятовування обчислень. 2303 | 2304 | - `useImperativeHandle()` — для керування ref дочірнього компонента. 2305 | 2306 | - `useLayoutEffect()` — коли треба щось зробити перед відображенням змін в DOM (наприклад, вимірювання). 2307 | 2308 |

2309 | 2310 |

2311 |

45. Як реалізувати одноразове виконання операції під час початкового рендерингу?

2312 | 2313 | #### React 2314 | 2315 | - Для виконання операції лише один раз під час початкового рендерингу у функціональних компонентах використовуй `useEffect` з порожнім масивом залежностей (`[]`): 2316 | 2317 | #### Приклад: 2318 | 2319 | ```jsx 2320 | import { useEffect } from "react"; 2321 | 2322 | function MyComponent() { 2323 | useEffect(() => { 2324 | console.log("Це виконається лише один раз після монтування компонента"); 2325 | }, []); 2326 | 2327 | return

Компонент

; 2328 | } 2329 | ``` 2330 | 2331 | #### Пояснення: 2332 | 2333 | - `useEffect(() => { /_ код _/ }, [])` — пустий масив залежностей означає, що ефект запуститься тільки один раз після першого рендерингу (аналог `componentDidMount` у класових компонентах). 2334 | 2335 | #### Додатково (наприклад, підписка/відписка): 2336 | 2337 | ```jsx 2338 | useEffect(() => { 2339 | const interval = setInterval(() => { 2340 | console.log("Працює одноразовий ефект"); 2341 | }, 1000); 2342 | 2343 | return () => clearInterval(interval); // Очистка при розмонтуванні 2344 | }, []); 2345 | ``` 2346 | 2347 | - Цей підхід корисний для ініціалізації API-запитів, підписок, таймерів тощо. 2348 | 2349 |

2350 | 2351 | ### Контекст та управління станом 2352 | 2353 |

2354 |

46. Що таке контекст (Context)?

2355 | 2356 | #### React 2357 | 2358 | - **Контекст (Context)** в React — це механізм для передачі даних через дерево компонентів без необхідності передавати ці дані через пропси на кожному рівні. 2359 | 2360 | #### Як працює контекст: 2361 | 2362 | 1. **React.createContext()** — використовується для створення контексту. 2363 | 2364 | ```jsx 2365 | const MyContext = React.createContext(defaultValue); 2366 | ``` 2367 | 2368 | 2. **Provider** — компонент, який надає значення контексту. Він обгортає частину дерева компонентів і передає значення вниз через value. 2369 | 2370 | ```jsx 2371 | 2372 | 2373 | 2374 | ``` 2375 | 2376 | 3. **Consumer** — компонент, який споживає значення контексту. Зазвичай використовує функцію як дочірній елемент, що отримує значення контексту. 2377 | 2378 | ```jsx 2379 | 2380 | {value => } 2381 | 2382 | ``` 2383 | 2384 | 4. **useContext** — хук, який дозволяє доступити значення контексту без необхідності використовувати Consumer. 2385 | 2386 | ```jsx 2387 | const value = useContext(MyContext); 2388 | ``` 2389 | 2390 | #### Коли використовувати: 2391 | 2392 | - Коли є потреба передавати дані між компонентами на різних рівнях ієрархії (наприклад, тема, мова або користувач). 2393 | 2394 | - Коли вам не хочеться передавати пропси через кілька рівнів компонентів, що може ускладнити код. 2395 | 2396 | #### Приклад використання: 2397 | 2398 | ```jsx 2399 | // Створення контексту 2400 | const ThemeContext = React.createContext("light"); 2401 | 2402 | // Компонент, який надає значення контексту 2403 | function App() { 2404 | return ( 2405 | 2406 | 2407 | 2408 | ); 2409 | } 2410 | 2411 | // Компонент, який споживає значення контексту 2412 | function ThemedComponent() { 2413 | const theme = useContext(ThemeContext); 2414 | return

The current theme is {theme}

; 2415 | } 2416 | ``` 2417 | 2418 | #### Переваги: 2419 | 2420 | - Зручність в передачі глобальних значень. 2421 | 2422 | - Покращує масштабованість програми, зменшуючи кількість переданих пропсів. 2423 | 2424 |

2425 | 2426 |

2427 |

47. Як в React працює механізм контексту (Context) для спільної передачі даних між компонентами?

2428 | 2429 | #### React 2430 | 2431 | - Механізм **React Context** дозволяє передавати дані між компонентами без необхідності передавати їх через пропси на кожному рівні компонентів. Це корисно для глобальних даних, таких як налаштування теми, аутентифікація користувача чи мова. 2432 | 2433 | #### Основні етапи роботи з контекстом: 2434 | 2435 | 1. **Створення контексту:** Для створення контексту використовується React.createContext(). Це повертає два компоненти: 2436 | 2437 | - Provider — компонент, який передає значення контексту. 2438 | 2439 | - Consumer — компонент, який отримує значення контексту. 2440 | 2441 | ```jsx 2442 | const MyContext = React.createContext(); 2443 | ``` 2444 | 2445 | 2. **Надання контексту:** Використовуємо Provider, щоб огорнути компоненти, яким потрібно передавати контекст. В Provider передається значення через пропс value. 2446 | 2447 | ```jsx 2448 | const App = () => { 2449 | const [user, setUser] = useState("John Doe"); 2450 | 2451 | return ( 2452 | 2453 | 2454 | 2455 | ); 2456 | }; 2457 | ``` 2458 | 2459 | 3. **Отримання контексту:** Використовуємо Consumer або хук useContext для доступу до значення контексту. 2460 | 2461 | - **Consumer:** 2462 | 2463 | ```jsx 2464 | const Child = () => ( 2465 | {(user) =>

{user}

} 2466 | ); 2467 | ``` 2468 | 2469 | - **useContext хук (рекомендовано в функціональних компонентах):** 2470 | 2471 | ```jsx 2472 | const Child = () => { 2473 | const user = useContext(MyContext); 2474 | return

{user}

; 2475 | }; 2476 | ``` 2477 | 2478 | - **Зміна контексту:** Для зміни значення контексту можна використовувати функції, передані через `useState` або інші методи управління станом. 2479 | 2480 | ```jsx 2481 | const App = () => { 2482 | const [user, setUser] = useState("John Doe"); 2483 | 2484 | return ( 2485 | 2486 | 2487 | 2488 | 2489 | ); 2490 | }; 2491 | ``` 2492 | 2493 | #### Ключові моменти: 2494 | 2495 | - Контекст дозволяє уникати "prop drilling" (передавання пропсів через багато компонентів). 2496 | 2497 | - Якщо значення контексту змінюється, всі компоненти, які споживають цей контекст, будуть перерендерені. 2498 | 2499 | - **_useContext_** — зручніший і сучасніший спосіб отримати значення контексту в порівнянні з `Consumer`. 2500 | 2501 | Контекст — це потужний інструмент, але використовувати його варто тільки для глобальних даних. Для локального стану краще використовувати звичайний state. 2502 | 2503 |

2504 | 2505 |

2506 |

48. Що таке буріння пропсів (Prop Drilling)? Як його уникнути?

2507 | 2508 | #### React 2509 | 2510 | - **Prop Drilling** — це передача пропсів через кілька рівнів вкладених компонентів, навіть якщо вони потрібні лише в дочірньому компоненті глибше в ієрархії. Це ускладнює підтримку коду та робить його менш читабельним. 2511 | 2512 | - **Приклад Prop Drilling:** 2513 | 2514 | ```jsx 2515 | const Parent = () => { 2516 | const user = { name: "John" }; 2517 | return ; 2518 | }; 2519 | 2520 | const Child = ({ user }) => { 2521 | return ; 2522 | }; 2523 | 2524 | const GrandChild = ({ user }) => { 2525 | return

Ім'я: {user.name}

; 2526 | }; 2527 | ``` 2528 | 2529 | - Тут `user` передається через `Child`, хоча він йому не потрібен — це і є **_буріння пропсів_**. 2530 | 2531 | #### Як уникнути Prop Drilling? 2532 | 2533 | | **Метод** | **Опис** | 2534 | | --------------------------------------------------- | ----------------------------------------------------------------------- | 2535 | | **Context API** | Дозволяє передавати дані безпосередньо потрібним компонентам. | 2536 | | **Зовнішні стейти (Redux, Zustand, Jotai, Recoil)** | Використовуються для управління глобальним станом без передачі пропсів. | 2537 | | **Компоненти з рендер-пропсами (Render Props)** | Дозволяють передавати функції замість пропсів. | 2538 | | **Custom Hooks** | Виносять логіку в окремі функції для доступу до загальних даних. | 2539 | 2540 | #### Приклад використання Context API замість Prop Drilling 2541 | 2542 | ```jsx 2543 | import { createContext, useContext } from "react"; 2544 | 2545 | const UserContext = createContext(); 2546 | 2547 | const Parent = () => { 2548 | const user = { name: "John" }; 2549 | return ( 2550 | 2551 | 2552 | 2553 | ); 2554 | }; 2555 | 2556 | const GrandChild = () => { 2557 | const user = useContext(UserContext); 2558 | return

Ім'я: {user.name}

; 2559 | }; 2560 | ``` 2561 | 2562 | - Тут `user` доступний напряму у `GrandChild`, без зайвої передачі через `Child`. 2563 | 2564 |

2565 | 2566 |

2567 |

49. Що таке Redux?

2568 | 2569 | #### React 2570 | 2571 | - Redux — це бібліотека для керування станом у JavaScript-додатках, особливо популярна у React. Вона ґрунтується на концепції глобального сховища (store), де зберігається весь стан додатка, і дозволяє керувати ним через передбачувані зміни. 2572 | 2573 | #### Основні принципи Redux: 2574 | 2575 | 1. **Єдине джерело правди** — весь стан зберігається в одному глобальному `store`, що спрощує відстеження змін. 2576 | 2. **Стан є лише для читання** — змінювати стан напряму не можна, тільки через `action`. 2577 | 3. **Зміни відбуваються через чисті функції** — стан змінюється за допомогою функцій-ред’юсерів (reducers), які приймають поточний стан і `action`, повертаючи новий стан. 2578 | 2579 | #### Основні елементи Redux: 2580 | 2581 | - **Store** — єдине сховище стану. 2582 | - **Actions** — об'єкти, що описують намір змінити стан. 2583 | - **Reducers** — чисті функції, що визначають, як змінюється стан. 2584 | - **Dispatch** — метод для відправки `action`. 2585 | - **Selectors** — функції для отримання потрібних даних зі `store`. 2586 | 2587 | Redux підходить для великих додатків з ускладненими потоками даних, але для простих проєктів часто є зайвим. 2588 | 2589 |

2590 | 2591 |

2592 |

50. Які ти ще знаш бібліотеки керуванням стану в React крім Redux?

2593 | 2594 | #### React 2595 | 2596 | - Окрім Redux, є багато бібліотек для керування станом у React: 2597 | 2598 | 1. **React Context API** — вбудований механізм React для передачі стану без пробросу пропсів. Добре підходить для малих і середніх додатків. 2599 | 2600 | 2. **Zustand** — простіший і легший за Redux, не потребує reducers та actions. Використовує імперативний підхід і працює через хуки. 2601 | 2602 | 3. **Recoil** — бібліотека від Facebook, що працює з атомами (atoms) та селекторами (selectors), дозволяючи створювати гнучку систему глобального стану. 2603 | 2604 | 4. **Jotai** — схожа на Recoil, але простіша. Використовує атоми для збереження стану та дозволяє декларативно керувати ним. 2605 | 2606 | 5. **MobX** — реактивний підхід до керування станом, працює через спостереження (observables). Зручний для роботи з об’єктами та складними структурами. 2607 | 2608 | 6. **Effector** — більш декларативний та ефективний за Redux. Побудований на реактивному підході та дозволяє легко керувати потоками даних. 2609 | 2610 | 7. **XState** — бібліотека для роботи з машинами станів (state machines), добре підходить для складної бізнес-логіки. 2611 | 2612 | - Кожна з них має свої переваги, і вибір залежить від складності проєкту та вимог до продуктивності. 2613 | 2614 |

2615 | 2616 |

2617 |

51. Що таке Redux Thunk?

2618 | 2619 | #### React 2620 | 2621 | - **Redux Thunk** — це middleware для Redux, який дозволяє виконувати асинхронні операції (наприклад, запити до API) перед відправкою змін у `store`. 2622 | 2623 | #### Як працює: 2624 | 2625 | - Звичайно, Redux дозволяє передавати в `dispatch` тільки об'єкти (actions). Redux Thunk розширює цю можливість, дозволяючи передавати функції. Це дає змогу: 2626 | 2627 | 1. Виконувати асинхронні дії перед зміною стану. 2628 | 2629 | 2. Отримувати доступ до `dispatch` і `getState` усередині `thunk`. 2630 | 2631 | #### Приклад використання: 2632 | 2633 | ```jsx 2634 | const fetchData = () => { 2635 | return async (dispatch) => { 2636 | dispatch({ type: "FETCH_START" }); 2637 | 2638 | try { 2639 | const response = await fetch("https://api.example.com/data"); 2640 | const data = await response.json(); 2641 | dispatch({ type: "FETCH_SUCCESS", payload: data }); 2642 | } catch (error) { 2643 | dispatch({ type: "FETCH_ERROR", error }); 2644 | } 2645 | }; 2646 | }; 2647 | ``` 2648 | 2649 | - Далі викликаємо цей `thunk`: 2650 | 2651 | ```jsx 2652 | dispatch(fetchData()); 2653 | ``` 2654 | 2655 | #### Коли використовувати: 2656 | 2657 | - Для запитів до API. 2658 | - Для затримок або складної логіки перед оновленням store. 2659 | - Коли потрібно виконати кілька dispatch у рамках однієї дії. 2660 | 2661 | Якщо додаток має складну асинхронну логіку, краще розглянути **Redux Saga** або **RTK Query** як альтернативи. 2662 | 2663 |

2664 | 2665 |

2666 |

52. Як працює Redux Saga?

2667 | 2668 | #### React 2669 | 2670 | - **Redux Saga** — це middleware для Redux, яке використовує генератори (function\*) для керування асинхронними запитами в додатку. 2671 | 2672 | #### Як працює: 2673 | 2674 | 1. **Слухає екшени** (`takeEvery`, `takeLatest`) і реагує на них. 2675 | 2676 | 2. **Виконує побічні ефекти** (запити до API, таймери тощо). 2677 | 2678 | 3. **Диспатчить нові екшени** (`put`) у store. 2679 | 2680 | #### Приклад: 2681 | 2682 | 1. **Сага для отримання даних з API:** 2683 | 2684 | ```jsx 2685 | import { call, put, takeEvery } from "redux-saga/effects"; 2686 | 2687 | function* fetchData() { 2688 | try { 2689 | const response = yield call(fetch, "https://api.example.com/data"); 2690 | const data = yield response.json(); 2691 | yield put({ type: "FETCH_SUCCESS", payload: data }); 2692 | } catch (error) { 2693 | yield put({ type: "FETCH_ERROR", error }); 2694 | } 2695 | } 2696 | ``` 2697 | 2698 | 2. **Слухач екшенів:** 2699 | 2700 | ```jsx 2701 | function* watchFetchData() { 2702 | yield takeEvery("FETCH_REQUEST", fetchData); 2703 | } 2704 | ``` 2705 | 2706 | 3. **Запуск саги в `store`:** 2707 | 2708 | ```jsx 2709 | import createSagaMiddleware from "redux-saga"; 2710 | const sagaMiddleware = createSagaMiddleware(); 2711 | const store = createStore(reducer, applyMiddleware(sagaMiddleware)); 2712 | sagaMiddleware.run(watchFetchData); 2713 | ``` 2714 | 2715 | #### Переваги Redux Saga: 2716 | 2717 | ✅ Керує складною асинхронною логікою. 2718 | ✅ Вбудоване оброблення скасувань (`takeLatest`). 2719 | ✅ Потужні оператори (`call`, `put`, `select`, `delay`). 2720 | 2721 | - Redux Thunk простіший, але для складних сценаріїв **Saga краще підходить**. 2722 | 2723 |

2724 | 2725 |

2726 |

53. Що таке React Fiber?

2727 | 2728 | #### React 2729 | 2730 | - **React Fiber** — це нова архітектура рендерингу в React, представлена з версії 16. Вона була розроблена для покращення продуктивності, підтримки асинхронного рендерингу та забезпечення більш гнучкого управління оновленнями UI. 2731 | 2732 | #### Ключові особливості React Fiber: 2733 | 2734 | 1. **Покращена продуктивність:** 2735 | 2736 | - Fiber дозволяє React зберігати стан виконання рендеру, що дає можливість переривати і продовжувати рендеринг за потреби. Це важливо для великих додатків, де складні обчислення можуть уповільнювати рендеринг. 2737 | 2738 | 2. **Асинхронний рендеринг:** 2739 | 2740 | - React Fiber підтримує асинхронний рендеринг, що дозволяє виконувати рендеринг по частинах, покращуючи відгук додатку, особливо в складних інтерфейсах. Завдяки цьому можна виконувати рендеринг без блокування головного потоку. 2741 | 2742 | 3. **Пріоритет оновлень:** 2743 | 2744 | - Fiber дозволяє надавати пріоритет різним типам оновлень (наприклад, рендеринг анімацій може бути високим пріоритетом, а рендеринг змін стану — низьким). Це дозволяє React управляти складними оновленнями більш ефективно. 2745 | 2746 | 4. **Розбиття рендерингу на підзадачі:** 2747 | 2748 | - У старих версіях React всі зміни оброблялись в одному кроці. Fiber розбиває рендеринг на дрібніші підзадачі, що дозволяє React виконувати роботу поетапно і дає змогу обробляти інші важливі операції (наприклад, обробку подій) між етапами. 2749 | 2750 | 5. **Покращена підтримка анімацій та переходів:** 2751 | 2752 | - Завдяки асинхронному рендерингу, React може більш ефективно керувати анімаціями, що робить переходи між станами плавними та без затримок. 2753 | 2754 | #### Як працює React Fiber? 2755 | 2756 | - У старих версіях React весь процес рендерингу був синхронним: від початку до кінця. Це означало, що важкі обчислення блокували рендеринг інтерфейсу. У React Fiber рендеринг розділений на маленькі задачі, які можуть бути виконані асинхронно. Якщо необхідно, React може перервати одну задачу і продовжити виконання пізніше, не блокуючи інші операції (наприклад, оновлення UI або обробку подій). 2757 | 2758 | - **_Fiber дозволяє React:_** 2759 | 2760 | - Розподіляти виконання рендерингу для покращення продуктивності. 2761 | 2762 | - Реалізувати асинхронні оновлення UI. 2763 | 2764 | - Краще керувати пріоритетами та обробкою важких обчислень, що особливо важливо для складних інтерфейсів і додатків. 2765 | 2766 | #### Переваги: 2767 | 2768 | - Покращення відгуку додатків. 2769 | 2770 | - Можливість обробляти важкі операції без затримок для користувача. 2771 | 2772 | - Краще управління анімаціями та переходами. 2773 | 2774 | **_React Fiber_** — це внутрішнє оновлення, яке змінило спосіб, яким React працює з рендерингом, покращуючи загальну продуктивність додатків. 2775 | 2776 |

2777 | 2778 |

2779 |

54. Що таке Lifting State Up у React?

2780 | 2781 | #### React 2782 | 2783 | **Lifting State Up** — це підхід у React, коли стан (state) піднімається до найближчого спільного предка компонентів, яким потрібно спільно використовувати цей стан. Це дозволяє організувати єдине джерело правди для управління даними між компонентами. 2784 | 2785 | #### Основна ідея: 2786 | 2787 | 1. Компоненти, які мають спільно використовувати дані, не повинні кожен мати власний стан. 2788 | 2789 | 2. Стан піднімається до батьківського компонента, який передає дані через props дочірнім компонентам. 2790 | 2791 | #### Як це працює: 2792 | 2793 | 1. Батьківський компонент зберігає стан. 2794 | 2795 | 2. Він передає стан та функції для оновлення стану своїм дочірнім компонентам через props. 2796 | 2797 | 3. Дочірні компоненти повідомляють батька про зміни, використовуючи передані функції. 2798 | 2799 | #### Приклад: 2800 | 2801 | ```jsx 2802 | import React, { useState } from "react"; 2803 | 2804 | function TemperatureInput({ temperature, onTemperatureChange }) { 2805 | return ( 2806 |

2807 | Enter temperature in Celsius: 2808 | onTemperatureChange(e.target.value)} 2812 | /> 2813 |

2814 | ); 2815 | } 2816 | 2817 | function BoilingVerdict({ celsius }) { 2818 | return celsius >= 100 ? ( 2819 |

The water will boil.

2820 | ) : ( 2821 |

The water won't boil.

2822 | ); 2823 | } 2824 | 2825 | function Calculator() { 2826 | const [temperature, setTemperature] = useState(""); 2827 | 2828 | return ( 2829 |

2830 | 2834 | 2835 |

2836 | ); 2837 | } 2838 | 2839 | export default Calculator; 2840 | ``` 2841 | 2842 | #### Переваги: 2843 | 2844 | 1. Забезпечує єдине джерело правди для стану. 2845 | 2846 | 2. Полегшує синхронізацію даних між компонентами. 2847 | 2848 | 3. Робить компоненти більш передбачуваними та повторно використовуваними. 2849 | 2850 |

2851 | 2852 | ### Форми в React 2853 | 2854 |

2855 |

55. Що таке контрольовані компоненти (Controlled Components)?

2856 | 2857 | #### React 2858 | 2859 | #### Контрольовані компоненти (Controlled Components) в React 2860 | 2861 | - Контрольовані компоненти — це компоненти, в яких **React контролює стан форми** через `state`. Значення полів форми (наприклад, ``, `

`, `<select>`) прив'язуються до стану компонента, і зміни обробляються через події.
2862 | 
2863 | - **Як це працює:**
2864 | 
2865 | 1. Компонент зберігає значення форми у своєму `state`.
2866 | 
2867 | 2. Зміни значення полів форми обробляються через подію `onChange`.
2868 | 
2869 | 3. Значення форми оновлюється, використовуючи `setState`.
2870 | 
2871 | - **_Приклад:_**
2872 | 
2873 | ```jsx
2874 | import React, { useState } from "react";
2875 | 
2876 | function ControlledForm() {
2877 |   const [inputValue, setInputValue] = useState("");
2878 | 
2879 |   const handleChange = (event) => {
2880 |     setInputValue(event.target.value); // Оновлюємо стан
2881 |   };
2882 | 
2883 |   const handleSubmit = (event) => {
2884 |     event.preventDefault();
2885 |     console.log("Submitted value:", inputValue);
2886 |   };
2887 | 
2888 |   return (
2889 |     <form onSubmit={handleSubmit}>
2890 |       <label>
2891 |         Enter text:
2892 |         <input
2893 |           type="text"
2894 |           value={inputValue} // Значення контролюється state
2895 |           onChange={handleChange} // Обробка змін
2896 |         />
2897 |       </label>
2898 |       <button type="submit">Submit</button>
2899 |     </form>
2900 |   );
2901 | }
2902 | 
2903 | export default ControlledForm;
2904 | ```
2905 | 
2906 | #### Основні переваги:
2907 | 
2908 | 1. **Одне джерело істини:** Значення форми синхронізоване зі станом компонента.
2909 | 
2910 | 2. **Гнучкість:** Легко валідовувати та модифікувати дані форми.
2911 | 
2912 | 3. **Прозорість:** Стан форми зрозумілий та передбачуваний.
2913 | 
2914 | #### Відмінності від неконтрольованих компонентів:
2915 | 
2916 | - У контрольованих компонентах значення форми контролюється React через `state`.
2917 | 
2918 | - У неконтрольованих компонентах значення зберігається в самому DOM, і доступ до нього здійснюється через `ref`.
2919 | 
2920 | - **_Неконтрольований приклад для порівняння:_**
2921 | 
2922 | ```jsx
2923 | function UncontrolledForm() {
2924 |   const inputRef = React.useRef();
2925 | 
2926 |   const handleSubmit = (event) => {
2927 |     event.preventDefault();
2928 |     console.log("Submitted value:", inputRef.current.value);
2929 |   };
2930 | 
2931 |   return (
2932 |     <form onSubmit={handleSubmit}>
2933 |       <label>
2934 |         Enter text:
2935 |         <input type="text" ref={inputRef} />
2936 |       </label>
2937 |       <button type="submit">Submit</button>
2938 |     </form>
2939 |   );
2940 | }
2941 | ```
2942 | 
2943 | - Контрольовані компоненти надають кращий контроль та передбачуваність у роботі з формами.
2944 | 
2945 | </details>
2946 | 
2947 | <details>
2948 | <summary>56. Що таке неконтрольовані компоненти (Uncontrolled Components)?</summary>
2949 | 
2950 | #### React
2951 | 
2952 | #### Неконтрольовані компоненти у React
2953 | 
2954 | - Неконтрольовані компоненти (Uncontrolled Components) — це компоненти, які зберігають свій стан у DOM, а не у внутрішньому стані React-компонента. Доступ до значень таких компонентів здійснюється за допомогою **рефів (refs)**.
2955 | 
2956 | #### Основні характеристики:
2957 | 
2958 | 1. **Стан керується DOM:** значення полів зберігаються та оновлюються безпосередньо у DOM.
2959 | 
2960 | 2. **Менше інтеграції з React:** вони не використовують useState або будь-які інші засоби React для зберігання стану.
2961 | 
2962 | 3. **Застосування рефів:** для отримання доступу до значення полів форми використовується ref.
2963 | 
2964 | #### Приклад неконтрольованого компонента:
2965 | 
2966 | ```jsx
2967 | import React, { useRef } from "react";
2968 | 
2969 | function UncontrolledForm() {
2970 |   const inputRef = useRef(null);
2971 | 
2972 |   const handleSubmit = (event) => {
2973 |     event.preventDefault();
2974 |     alert(`Введене значення: ${inputRef.current.value}`);
2975 |   };
2976 | 
2977 |   return (
2978 |     <form onSubmit={handleSubmit}>
2979 |       <label>
2980 |         Ім'я:
2981 |         <input type="text" ref={inputRef} />
2982 |       </label>
2983 |       <button type="submit">Відправити</button>
2984 |     </form>
2985 |   );
2986 | }
2987 | 
2988 | export default UncontrolledForm;
2989 | ```
2990 | 
2991 | #### Коли використовувати неконтрольовані компоненти:
2992 | 
2993 | - Якщо потрібна мінімальна інтеграція React із DOM.
2994 | 
2995 | - Якщо значення форми обробляються сторонніми бібліотеками.
2996 | 
2997 | - Якщо необхідна проста форма без складної логіки.
2998 | 
2999 | #### Переваги:
3000 | 
3001 | - Простота реалізації для простих форм.
3002 | 
3003 | - Менше коду для управління станом.
3004 | 
3005 | #### Недоліки:
3006 | 
3007 | - Менший контроль над значеннями.
3008 | 
3009 | - Складніше реалізувати валідацію або синхронізацію даних.
3010 | 
3011 | - Менш React-орієнтований підхід.
3012 | 
3013 | </details>
3014 | 
3015 | <details>
3016 | <summary>57. Як створити форму в React?</summary>
3017 | 
3018 | #### React
3019 | 
3020 | #### Створення форми в React
3021 | 
3022 | - Форми в React створюються за допомогою елементів `<form>` та відповідних контролів, як-от `<input>`, `<textarea>`, `<select>`. Реактивність форм забезпечується керованими або некерованими компонентами.
3023 | 
3024 | #### Керована форма (Controlled Component)
3025 | 
3026 | - Керовані компоненти використовують стан (state) для відстеження значення полів форми.
3027 | 
3028 | #### Приклад:
3029 | 
3030 | ```jsx
3031 | import React, { useState } from "react";
3032 | 
3033 | function ControlledForm() {
3034 |   const [name, setName] = useState("");
3035 |   const [email, setEmail] = useState("");
3036 | 
3037 |   const handleSubmit = (e) => {
3038 |     e.preventDefault();
3039 |     console.log("Submitted:", { name, email });
3040 |   };
3041 | 
3042 |   return (
3043 |     <form onSubmit={handleSubmit}>
3044 |       <label>
3045 |         Name:
3046 |         <input
3047 |           type="text"
3048 |           value={name}
3049 |           onChange={(e) => setName(e.target.value)}
3050 |         />
3051 |       </label>
3052 |       <br />
3053 |       <label>
3054 |         Email:
3055 |         <input
3056 |           type="email"
3057 |           value={email}
3058 |           onChange={(e) => setEmail(e.target.value)}
3059 |         />
3060 |       </label>
3061 |       <br />
3062 |       <button type="submit">Submit</button>
3063 |     </form>
3064 |   );
3065 | }
3066 | 
3067 | export default ControlledForm;
3068 | ```
3069 | 
3070 | - **Особливості:**
3071 | 
3072 |   - Кожне поле контролюється через `state`.
3073 | 
3074 |   - Легко синхронізувати та обробляти дані форми.
3075 | 
3076 | #### Некерована форма (Uncontrolled Component)
3077 | 
3078 | - Некеровані компоненти використовують реф (`ref`) для прямого доступу до DOM-елементів.
3079 | 
3080 | #### Приклад:
3081 | 
3082 | ```jsx
3083 | import React, { useRef } from "react";
3084 | 
3085 | function UncontrolledForm() {
3086 |   const nameRef = useRef();
3087 |   const emailRef = useRef();
3088 | 
3089 |   const handleSubmit = (e) => {
3090 |     e.preventDefault();
3091 |     console.log("Submitted:", {
3092 |       name: nameRef.current.value,
3093 |       email: emailRef.current.value,
3094 |     });
3095 |   };
3096 | 
3097 |   return (
3098 |     <form onSubmit={handleSubmit}>
3099 |       <label>
3100 |         Name:
3101 |         <input type="text" ref={nameRef} />
3102 |       </label>
3103 |       <br />
3104 |       <label>
3105 |         Email:
3106 |         <input type="email" ref={emailRef} />
3107 |       </label>
3108 |       <br />
3109 |       <button type="submit">Submit</button>
3110 |     </form>
3111 |   );
3112 | }
3113 | 
3114 | export default UncontrolledForm;
3115 | ```
3116 | 
3117 | - **Особливості:**
3118 | 
3119 |   - Доступ до значень здійснюється через ref.
3120 | 
3121 |   - Підходить для простих форм.
3122 | 
3123 | #### Основні моменти:
3124 | 
3125 | 1. **Керована форма:**
3126 | 
3127 | - Використовує `state`.
3128 | 
3129 | - Більш підходить для складних форм, що потребують валідації або синхронізації.
3130 | 
3131 | 2. Некерована форма:
3132 | 
3133 | - Використовує `ref`.
3134 | 
3135 | - Простий підхід без складної логіки управління станом.
3136 | 
3137 | Вибір підходу залежить від складності форми та потреб у взаємодії з її полями.
3138 | 
3139 | </details>
3140 | 
3141 | <details>
3142 | <summary>58. Як застосувати перевірку пропсів (props) у React?</summary>
3143 | 
3144 | #### React
3145 | 
3146 | - Для перевірки пропсів у React використовують **PropTypes**.
3147 | 
3148 | 1. **Встановлення PropTypes (якщо не встановлено)**
3149 | 
3150 | ```sh
3151 | npm install prop-types
3152 | ```
3153 | 
3154 | 2. **Використання PropTypes у функціональному компоненті:**
3155 | 
3156 | ```jsx
3157 | import React from "react";
3158 | import PropTypes from "prop-types";
3159 | 
3160 | function UserCard({ name, age, isAdmin }) {
3161 |   return (
3162 |     <div>
3163 |       <h2>{name}</h2>
3164 |       <p>Age: {age}</p>
3165 |       {isAdmin && <p>Admin Access</p>}
3166 |     </div>
3167 |   );
3168 | }
3169 | 
3170 | // Визначення PropTypes
3171 | UserCard.propTypes = {
3172 |   name: PropTypes.string.isRequired,
3173 |   age: PropTypes.number,
3174 |   isAdmin: PropTypes.bool,
3175 | };
3176 | 
3177 | // Значення за замовчуванням
3178 | UserCard.defaultProps = {
3179 |   age: 18,
3180 |   isAdmin: false,
3181 | };
3182 | 
3183 | export default UserCard;
3184 | ```
3185 | 
3186 | 3. **Використання у класовому компоненті:**
3187 | 
3188 | ```jsx
3189 | import React from "react";
3190 | import PropTypes from "prop-types";
3191 | 
3192 | class UserCard extends React.Component {
3193 |   render() {
3194 |     const { name, age, isAdmin } = this.props;
3195 |     return (
3196 |       <div>
3197 |         <h2>{name}</h2>
3198 |         <p>Age: {age}</p>
3199 |         {isAdmin && <p>Admin Access</p>}
3200 |       </div>
3201 |     );
3202 |   }
3203 | }
3204 | 
3205 | // Визначення PropTypes
3206 | UserCard.propTypes = {
3207 |   name: PropTypes.string.isRequired,
3208 |   age: PropTypes.number,
3209 |   isAdmin: PropTypes.bool,
3210 | };
3211 | 
3212 | // Значення за замовчуванням
3213 | UserCard.defaultProps = {
3214 |   age: 18,
3215 |   isAdmin: false,
3216 | };
3217 | 
3218 | export default UserCard;
3219 | ```
3220 | 
3221 | #### Доступні типи PropTypes:
3222 | 
3223 | - `PropTypes.string`
3224 | - `PropTypes.number`
3225 | - `PropTypes.bool`
3226 | - `PropTypes.array`
3227 | - `PropTypes.object`
3228 | - `PropTypes.func`
3229 | - `PropTypes.node` (JSX або текст)
3230 | - `PropTypes.element` (React-елемент)
3231 | - `PropTypes.oneOf(['value1', 'value2'])` (перелік допустимих значень)
3232 | - `PropTypes.shape({ key: PropTypes.type })` (об'єкт із певною структурою)
3233 | 
3234 | #### Висновок:
3235 | 
3236 | PropTypes допомагають уникнути помилок, перевіряючи типи пропсів, але в TypeScript це робиться на рівні самої мови.
3237 | 
3238 | </details>
3239 | 
3240 | ### Маршрутизація
3241 | 
3242 | <details>
3243 | <summary>59. Чим React Router відрізняється від звичайної маршрутизації?</summary>
3244 | 
3245 | #### React
3246 | 
3247 | #### Різниця між React Router і звичайною маршрутизацією:
3248 | 
3249 | | Критерій                   | React Router                                   | Звичайна маршрутизація (Server-Side Routing)       |
3250 | | -------------------------- | ---------------------------------------------- | -------------------------------------------------- |
3251 | | **Тип маршрутизації**      | Клієнтська (SPA)                               | Серверна (MPA)                                     |
3252 | | **Перехід між сторінками** | Без перезавантаження сторінки (JS оновлює URL) | Перезавантаження сторінки при кожному переході     |
3253 | | **Швидкість**              | Швидший, оскільки не перезапитує сервер        | Повільніший через нові HTTP-запити                 |
3254 | | **SEO**                    | Гірший без SSR (але Next.js вирішує проблему)  | Кращий, оскільки контент завантажується із сервера |
3255 | | **Обробка даних**          | Динамічний рендеринг компонентів               | Завантаження HTML зі сторони сервера               |
3256 | | **Налаштування**           | Потрібен React Router                          | Використовує стандартні можливості сервера         |
3257 | 
3258 | </details>
3259 | 
3260 | <details>
3261 | <summary>60. Як передавати пропси в React Router?</summary>
3262 | 
3263 | #### React
3264 | 
3265 | - Щоб передати пропси в компоненти при використанні **React Router**, є кілька підходів:
3266 | 
3267 | 1. **Використання компоненту Route для передачі пропсів:**
3268 | 
3269 | - Можна передавати пропси через компонент **Route** за допомогою `render` або `children`.
3270 | 
3271 | #### Приклад:
3272 | 
3273 | ```jsx
3274 | import { Route } from "react-router-dom";
3275 | 
3276 | <Route
3277 |   path="/profile"
3278 |   render={(props) => <Profile {...props} user="John" />}
3279 | />;
3280 | ```
3281 | 
3282 | - Тут ми передаємо додаткові пропси до компонента `Profile`.
3283 | 
3284 | 2. **Використання useNavigate() для передачі даних через навігацію (за допомогою state):**
3285 | 
3286 | - При переході на нову сторінку можна передавати пропси через `state`.
3287 | 
3288 | #### Приклад:
3289 | 
3290 | ```jsx
3291 | import { useNavigate } from "react-router-dom";
3292 | 
3293 | function Home() {
3294 |   const navigate = useNavigate();
3295 | 
3296 |   function goToProfile() {
3297 |     navigate("/profile", { state: { user: "John" } });
3298 |   }
3299 | 
3300 |   return <button onClick={goToProfile}>Go to Profile</button>;
3301 | }
3302 | ```
3303 | 
3304 | #### Отримання пропсів у компоненті:
3305 | 
3306 | ```jsx
3307 | import { useLocation } from "react-router-dom";
3308 | 
3309 | function Profile() {
3310 |   const location = useLocation();
3311 |   const user = location.state?.user;
3312 | 
3313 |   return <div>Welcome, {user}</div>;
3314 | }
3315 | ```
3316 | 
3317 | 3. **Використання useParams() для доступу до параметрів маршруту:**
3318 | 
3319 | - Якщо потрібно передати параметри через URL, можна використовувати `useParams()`.
3320 | 
3321 | #### Приклад:
3322 | 
3323 | ```jsx
3324 | import { useParams } from "react-router-dom";
3325 | 
3326 | function Profile() {
3327 |   const { id } = useParams();
3328 | 
3329 |   return <div>User ID: {id}</div>;
3330 | }
3331 | ```
3332 | 
3333 | #### Висновок:
3334 | 
3335 | - `render` або `children` підходять для передачі пропсів безпосередньо.
3336 | 
3337 | - `useNavigate()` та `state` дозволяють передавати дані між сторінками.
3338 | 
3339 | - `useParams()` зручний для динамічних параметрів в URL.
3340 | 
3341 | </details>
3342 | 
3343 | ### Стилізація в React
3344 | 
3345 | <details>
3346 | <summary>61. Способи стилізації в React-компонентах?</summary>
3347 | 
3348 | #### React
3349 | 
3350 | #### Способи використання стилів у React-компонентах:
3351 | 
3352 | 1. **Inline-стилі** Стилі передаються безпосередньо у вигляді об’єкта через атрибут `style`.
3353 | 
3354 | ```jsx
3355 | function InlineStyle() {
3356 |   const style = {
3357 |     color: "blue",
3358 |     fontSize: "20px",
3359 |   };
3360 | 
3361 |   return <h1 style={style}>Привіт, React!</h1>;
3362 | }
3363 | ```
3364 | 
3365 | 2. **CSS-файли** Використання звичайних CSS-файлів, які імпортуються в компонент.
3366 | 
3367 | ```jsx
3368 | import "./styles.css";
3369 | 
3370 | function CSSFile() {
3371 |   return <h1 className="heading">Привіт, React!</h1>;
3372 | }
3373 | ```
3374 | 
3375 | ```css
3376 | Копіювати
3377 | Редагувати
3378 | /* styles.css */
3379 | .heading {
3380 |   color: blue;
3381 |   font-size: 20px;
3382 | }
3383 | ```
3384 | 
3385 | 3. **CSS-модулі** Створюють локально ізольовані стилі для кожного компонента.
3386 | 
3387 | ```jsx
3388 | import styles from "./styles.module.css";
3389 | 
3390 | function CSSModule() {
3391 |   return <h1 className={styles.heading}>Привіт, React!</h1>;
3392 | }
3393 | ```
3394 | 
3395 | ```css
3396 | /* styles.module.css */
3397 | .heading {
3398 |   color: blue;
3399 |   font-size: 20px;
3400 | }
3401 | ```
3402 | 
3403 | 4. **Styled Components** Використання бібліотеки styled-components для написання стилів у JavaScript.
3404 | 
3405 | ```bash
3406 | npm install styled-components
3407 | ```
3408 | 
3409 | ```jsx
3410 | import styled from "styled-components";
3411 | 
3412 | const Heading = styled.h1`
3413 |   color: blue;
3414 |   font-size: 20px;
3415 | `;
3416 | 
3417 | function StyledComponent() {
3418 |   return <Heading>Привіт, React!</Heading>;
3419 | }
3420 | ```
3421 | 
3422 | 5. **Emotion** Альтернативна бібліотека для стилізації, схожа на styled-components.
3423 | 
3424 | ```bash
3425 | npm install @emotion/react @emotion/styled
3426 | ```
3427 | 
3428 | ```jsx
3429 | /**_ @jsxImportSource @emotion/react */
3430 | import { css } from "@emotion/react";
3431 | 
3432 | const style = css`
3433 |   color: blue;
3434 |   font-size: 20px;
3435 | `;
3436 | 
3437 | function EmotionStyle() {
3438 |   return <h1 css={style}>Привіт, React!</h1>;
3439 | }
3440 | ```
3441 | 
3442 | 6. **CSS-in-JS** Створення динамічних стилів у звичайних JavaScript-файлах.
3443 | 
3444 | ```jsx
3445 | function CSSInJS({ isBlue }) {
3446 |   const style = {
3447 |     color: isBlue ? "blue" : "red",
3448 |     fontSize: "20px",
3449 |   };
3450 | 
3451 |   return <h1 style={style}>Привіт, React!</h1>;
3452 | }
3453 | ```
3454 | 
3455 | 7. **Tailwind CSS** Фреймворк класів утиліт для стилізації компонентів.
3456 | 
3457 | ```jsx
3458 | function TailwindExample() {
3459 |   return <h1 className="text-blue-500 text-2xl">Привіт, React!</h1>;
3460 | }
3461 | ```
3462 | 
3463 | - **_Налаштування Tailwind CSS:_** додайте залежності та налаштуйте конфігурацію.
3464 | 
3465 | 8. **Sass/SCSS** Розширений CSS із підтримкою змінних, міксинів та вкладеності.
3466 | 
3467 | ```bash
3468 | npm install sass
3469 | ```
3470 | 
3471 | ```jsx
3472 | import "./styles.scss";
3473 | 
3474 | function SCSSExample() {
3475 |   return <h1 className="heading">Привіт, React!</h1>;
3476 | }
3477 | ```
3478 | 
3479 | ```scss
3480 | /* styles.scss */
3481 | .heading {
3482 |   color: blue;
3483 |   font-size: 20px;
3484 | }
3485 | ```
3486 | 
3487 | #### Вибір способу залежить від:
3488 | 
3489 | - Масштабності проекту.
3490 | 
3491 | - Потреби в ізоляції стилів.
3492 | 
3493 | - Переваг команди.
3494 | 
3495 | </details>
3496 | 
3497 | <details>
3498 | <summary>62. У чому перевага модульних стилів (module CSS)?</summary>
3499 | 
3500 | #### React
3501 | 
3502 | - **Перевага модульних стилів (CSS Modules):**
3503 | 
3504 | 1. **_Локальний Scope_** — стилі застосовуються тільки до компонента, а не глобально. Це запобігає конфліктам між класами і гарантує, що стилі не впливають на інші частини додатку.
3505 | 
3506 | 2. **_Унікальні імена класів_** — CSS Modules автоматично генерує унікальні імена класів, що виключає ризик перезапису стилів з іншими компонентами.
3507 | 
3508 | 3. **_Легша підтримка_** — з меншими проблемами при масштабуванні проекту, оскільки кожен компонент має свої стилі, що робить код більш організованим і легким для розуміння.
3509 | 
3510 | 4. **_Ізольованість_** — кожен компонент має повну ізоляцію стилів, що спрощує рефакторинг і зміну стилів без впливу на інші компоненти.
3511 | 
3512 | 5. **_Легша інтеграція з JavaScript_** — можна використовувати динамічні стилі за допомогою JavaScript, змінюючи класи в залежності від стану компонента.
3513 | 
3514 | - Це дозволяє зберігати порядок у великих додатках і знижує ймовірність помилок у стилях.
3515 | 
3516 | </details>
3517 | 
3518 | ### Оптимізація продуктивності
3519 | 
3520 | <details>
3521 | <summary>63. Які підходи ви знаєте для оптимізації продуктивності React-додатків?</summary>
3522 | 
3523 | #### React
3524 | 
3525 | #### Підходи для оптимізації продуктивності React-додатків:
3526 | 
3527 | 1. **Мемоїзація компонентів:**
3528 | 
3529 | - Використовуйте `React.memo` для мемоїзації функціональних компонентів, які не залежать від частих оновлень пропсів.
3530 | - Використовуйте `PureComponent` для класових компонентів.
3531 | 
3532 | 2. **Мемоїзація значень та функцій:**
3533 | 
3534 | - `useMemo` — для обчислення значень, які залежать від певних залежностей.
3535 | - `useCallback` — для мемоїзації функцій, які передаються в дочірні компоненти.
3536 | 
3537 | 3. **Оптимізація рендерингу списків:**
3538 | 
3539 | Завжди використовуйте унікальний key для елементів у списках.
3540 | Уникайте повторного рендерингу компонентів без потреби.
3541 | 
3542 | 4. **Динамічне завантаження компонентів:**
3543 | 
3544 | - Використовуйте `React.lazy` для завантаження компонентів на вимогу.
3545 | - В поєднанні з `Suspense` це дозволяє оптимізувати завантаження додатку.
3546 | 
3547 | 5. **Контроль за ререндерингом:**
3548 | 
3549 | - Використовуйте `shouldComponentUpdate` або `React.memo` для зменшення непотрібних рендерів.
3550 | - Використовуйте `React.Fragment` замість додаткових обгорткових елементів.
3551 | 
3552 | 6. **Розділення коду (Code Splitting):**
3553 | 
3554 | - Впроваджуйте `React.lazy` та динамічні імпорти, щоб завантажувати код модулів лише тоді, коли це потрібно.
3555 | 
3556 | 7. **Управління станом:**
3557 | 
3558 | - Уникайте зберігання глобального стану для компонентів, де це не потрібно.
3559 | - Виносьте важкі операції зі станом у контекст або спеціалізовані бібліотеки (Redux, Zustand).
3560 | 
3561 | 8. **Віртуалізація списків:**
3562 | 
3563 | - Використовуйте бібліотеки, такі як `react-window` або `react-virtualized`, для рендерингу лише видимих елементів списків.
3564 | 
3565 | 9. **Оптимізація зображень:**
3566 | 
3567 | - Використовуйте відкладене завантаження (`lazy loading`) для зображень.
3568 | - Стискайте та оптимізуйте зображення перед використанням.
3569 | 
3570 | 10. **Зменшення кількості компонентів в DOM:**
3571 | 
3572 | - Уникайте надмірного вкладення компонентів.
3573 | - Видаляйте непотрібні елементи з DOM при переходах між сторінками.
3574 | 
3575 | 11. **Кешування даних:**
3576 | 
3577 | - Використовуйте кешуючі бібліотеки, такі як `SWR` чи `React Query`, для управління даними та зменшення запитів до сервера.
3578 | 
3579 | 12. **Використання Production-збірки:**
3580 | 
3581 | - Упевніться, що додаток побудований за допомогою production-режиму (`npm run build`).
3582 | - Використовуйте інструменти, такі як `Webpack`, для мінімізації та оптимізації коду.
3583 | 
3584 | 13. **Профілювання додатку:**
3585 | 
3586 | - Використовуйте `React DevTools` для аналізу продуктивності.
3587 | - Виявляйте "вузькі місця" за допомогою вкладки "Profiler".
3588 | 
3589 | 14. **Оптимізація CSS та стилів:**
3590 | 
3591 | - Використовуйте `CSS-in-JS` рішення (наприклад, `styled-components`) тільки там, де це необхідно.
3592 | - Стискайте стилі за допомогою `PostCSS` або інших інструментів.
3593 | 
3594 | Ці підходи допомагають зменшити затримки, підвищити швидкість рендерингу та загальну продуктивність додатку.
3595 | 
3596 | </details>
3597 | 
3598 | <details>
3599 | <summary>64. Різниця між memo і useMemo?</summary>
3600 | 
3601 | #### React
3602 | 
3603 | #### Різниця між memo і useMemo
3604 | 
3605 | | Критерій                 | memo                                                              | useMemo                                                |
3606 | | ------------------------ | ----------------------------------------------------------------- | ------------------------------------------------------ |
3607 | | **Що це?**               | Функція вищого порядку (HOC)                                      | Хук                                                    |
3608 | | **Призначення**          | Запобігає повторному рендеру компонента, якщо пропси не змінилися | Запам’ятовує результат обчислення між рендерами        |
3609 | | **Де використовується?** | Обгортає компонент                                                | Всередині компонента                                   |
3610 | | **Приклад використання** | `export default memo(MyComponent);`                               | `const value = useMemo(() => compute(), [deps]);`      |
3611 | | **Що кешує?**            | Весь компонент                                                    | Результат функції                                      |
3612 | | **Коли застосовувати?**  | Якщо компонент рендериться з тими ж пропсами без змін             | Якщо обчислення ресурсозатратне і залежить від змінних |
3613 | 
3614 | #### Коли використовувати?
3615 | 
3616 | - `memo` — коли компонент отримує однакові пропси і його ререндер не потрібен.
3617 | 
3618 | - `useMemo` — коли потрібно зберігати результат обчислення, щоб не перераховувати його кожен раз.
3619 | 
3620 | </details>
3621 | 
3622 | <details>
3623 | <summary>65. Навіщо setState() потрібно передавати функцію?</summary>
3624 | 
3625 | #### React
3626 | 
3627 | - Передача функції в `setState()` потрібна, коли новий стан залежить від попереднього. Це гарантує правильне оновлення, оскільки `setState()` виконується асинхронно і може групувати виклики.
3628 | 
3629 | #### Приклад з проблемою:
3630 | 
3631 | ```jsx
3632 | function Counter() {
3633 |   const [count, setCount] = useState(0);
3634 | 
3635 |   function increment() {
3636 |     setCount(count + 1);
3637 |     setCount(count + 1);
3638 |   }
3639 | 
3640 |   return <button onClick={increment}>{count}</button>;
3641 | }
3642 | ```
3643 | 
3644 | - Тут `count + 1` обчислюється двічі з тим самим старим `count`, тому кнопка збільшуватиме значення лише на 1, а не на 2.
3645 | 
3646 | #### Правильний підхід:
3647 | 
3648 | ```jsx
3649 | function Counter() {
3650 |   const [count, setCount] = useState(0);
3651 | 
3652 |   function increment() {
3653 |     setCount((prevCount) => prevCount + 1);
3654 |     setCount((prevCount) => prevCount + 1);
3655 |   }
3656 | 
3657 |   return <button onClick={increment}>{count}</button>;
3658 | }
3659 | ```
3660 | 
3661 | - Тут `setCount()` отримує актуальне значення `prevCount`, тому інкремент працює коректно, збільшуючи значення на 2.
3662 | 
3663 | </details>
3664 | 
3665 | ### Взаємодія з DOM
3666 | 
3667 | <details>
3668 | <summary>66. Як рефи (refs) у React використовуються для взаємодії з DOM елементами?</summary>
3669 | 
3670 | #### React
3671 | 
3672 | - Рефи (refs) у React використовуються для отримання доступу до DOM елементів або компонентів безпосередньо, обминаючи стандартний механізм пропсів та стану.
3673 | 
3674 | 1. **Створення рефів:** Використовуєш `React.createRef()` для створення рефа.
3675 | 
3676 | ```jsx
3677 | const myRef = React.createRef();
3678 | ```
3679 | 
3680 | 2. **Прив'язка рефа до елемента:** Реф передається до DOM елемента через атрибут `ref`.
3681 | 
3682 | ```jsx
3683 | <input ref={myRef} />
3684 | ```
3685 | 
3686 | 3. **Взаємодія з DOM:** Реф дає доступ до DOM елемента через `.current`. Наприклад, щоб встановити фокус:
3687 | 
3688 | ```jsx
3689 | myRef.current.focus();
3690 | ```
3691 | 
3692 | 4. **Обмеження:** Рефи не повинні використовуватися для керування станом, вони призначені лише для взаємодії з DOM, коли це необхідно (наприклад, для фокусу, вибору тексту чи анімацій).
3693 | 
3694 | 5. **Функціональні компоненти:** В React 16.8 і вище для функціональних компонентів використовують useRef.
3695 | 
3696 | ```jsx
3697 | const inputRef = useRef();
3698 | inputRef.current.focus();
3699 | ```
3700 | 
3701 | </details>
3702 | 
3703 | <details>
3704 | <summary>67. Як використовувати InnerHtml у React?</summary>
3705 | 
3706 | #### React
3707 | 
3708 | - У React для вставки HTML-контенту в DOM використовується атрибут dangerouslySetInnerHTML. Це дає можливість вставити HTML безпосередньо в компонент, однак такий підхід може бути небезпечним, тому й називається "dangerously", оскільки він дозволяє вбудовувати сирий HTML, що може призвести до XSS-атак, якщо дані не очищені.
3709 | 
3710 | #### Приклад використання `dangerouslySetInnerHTML`:
3711 | 
3712 | ```jsx
3713 | const MyComponent = () => {
3714 |   const htmlContent = "<p>Це <strong>HTML</strong> контент.</p>";
3715 | 
3716 |   return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
3717 | };
3718 | ```
3719 | 
3720 | #### Пояснення:
3721 | 
3722 | - `dangerouslySetInnerHTML` приймає об'єкт, в якому ключ `__html` містить рядок HTML-коду.
3723 | 
3724 | - Це дозволяє вбудовувати HTML всередину компонента, але не безпечно, якщо контент надходить з ненадійних джерел.
3725 | 
3726 | #### Коли використовувати:
3727 | 
3728 | - Якщо ви впевнені в безпечності даних (наприклад, від власних серверів).
3729 | 
3730 | - Коли вам потрібно вбудувати динамічний HTML-контент, такий як сторінки чи статті з HTML.
3731 | 
3732 | #### Застереження:
3733 | 
3734 | - Безпека: Ніколи не використовуйте dangerouslySetInnerHTML для вставки даних, отриманих від користувача чи зовнішніх джерел, без попередньої очистки від шкідливих скриптів.
3735 | 
3736 | - Для очищення контенту використовуйте бібліотеки, такі як DOMPurify, щоб уникнути XSS атак.
3737 | 
3738 | Приклад очищення даних перед вставкою:
3739 | 
3740 | ```jsx
3741 | import DOMPurify from "dompurify";
3742 | 
3743 | const MyComponent = () => {
3744 |   const dirtyHtml = "<img src=x onerror=alert('XSS')>";
3745 |   const cleanHtml = DOMPurify.sanitize(dirtyHtml);
3746 | 
3747 |   return <div dangerouslySetInnerHTML={{ __html: cleanHtml }} />;
3748 | };
3749 | ```
3750 | 
3751 | Отже, `dangerouslySetInnerHTML` слід використовувати обережно і тільки в тих випадках, коли ви впевнені в безпеці контенту.
3752 | 
3753 | </details>
3754 | 
3755 | ### Рендеринг та серверна частина
3756 | 
3757 | <details>
3758 | <summary>68. Що таке ReactDOMServer?</summary>
3759 | 
3760 | #### React
3761 | 
3762 | - `ReactDOMServer` — це бібліотека, що входить до складу React, і використовується для рендерингу React-компонентів на сервері, тобто для серверного рендерингу (SSR). Це дозволяє генерувати HTML-код на сервері і передавати його на клієнт, що може покращити продуктивність і SEO.
3763 | 
3764 | #### Основні методи:
3765 | 
3766 | 1. `ReactDOMServer.renderToString()`: Рендерить React-елементи в HTML-строку. Це основний метод для генерації статичного HTML для початкового завантаження сторінки.
3767 | 
3768 | ```jsx
3769 | import ReactDOMServer from "react-dom/server";
3770 | const html = ReactDOMServer.renderToString(<App />);
3771 | ```
3772 | 
3773 | 2. `ReactDOMServer.renderToStaticMarkup()`: Рендерить HTML без будь-яких додаткових атрибутів, пов'язаних з React, таких як data-reactroot. Це підходить для створення повністю статичних сторінок.
3774 | 
3775 | ```jsx
3776 | const html = ReactDOMServer.renderToStaticMarkup(<App />);
3777 | ```
3778 | 
3779 | 3. `ReactDOMServer.hydrate()`: Використовується на клієнтській стороні для "гідратації" серверно-рендереного HTML, тобто для прив'язування реактивності до уже існуючого HTML.
3780 | 
3781 | ```jsx
3782 | ReactDOM.hydrate(<App />, document.getElementById("root"));
3783 | ```
3784 | 
3785 | #### Використання:
3786 | 
3787 | - **SSR (Server-Side Rendering):** Це підхід, при якому React-компоненти рендеряться на сервері, а не в браузері, що дозволяє надсилати повністю сформовану HTML-сторінку на клієнт.
3788 | 
3789 | - **SEO:** Оскільки сервер відразу відправляє HTML-контент, пошукові системи можуть індексувати сторінки без необхідності виконувати JavaScript.
3790 | 
3791 | Таким чином, `ReactDOMServer` дозволяє створювати попередньо рендерені сторінки, що покращує швидкість завантаження і може бути корисним для SEO.
3792 | 
3793 | </details>
3794 | 
3795 | <details>
3796 | <summary>69. Яке використання пакету react-dom?</summary>
3797 | 
3798 | #### React
3799 | 
3800 | - Пакет `react-dom` використовується для взаємодії React з реальним DOM у веб-додатках. Основні функції:
3801 | 
3802 | 1. `ReactDOM.render()`: Використовується для рендерингу компонента в реальний DOM. Це основний метод, який зв'язує React з HTML-елементами.
3803 | 
3804 | ```jsx
3805 | ReactDOM.render(<App />, document.getElementById("root"));
3806 | ```
3807 | 
3808 | 2. `ReactDOM.hydrate()`: Використовується для гідратації серверно-рендереного HTML (наприклад, для SSR). Це дозволяє React взяти на себе управління вже наявним HTML.
3809 | 
3810 | ```jsx
3811 | ReactDOM.hydrate(<App />, document.getElementById("root"));
3812 | ```
3813 | 
3814 | 3. `ReactDOM.createPortal()`: Дозволяє рендерити дочірні елементи в іншому місці DOM, поза межами звичайної ієрархії компонентів. Це часто використовується для модальних вікон, тултіпів і спливаючих елементів.
3815 | 
3816 | ```jsx
3817 | ReactDOM.createPortal(<Modal />, document.getElementById("modal-root"));
3818 | ```
3819 | 
3820 | 4. `ReactDOM.unmountComponentAtNode()`: Видаляє React-компонент з DOM.
3821 | 
3822 | ```jsx
3823 | ReactDOM.unmountComponentAtNode(document.getElementById("root"));
3824 | ```
3825 | 
3826 | 5. `ReactDOM.findDOMNode()`: Дає доступ до реального DOM елемента компонента (рідко використовується, бо є більш сучасні підходи через рефи).
3827 | 
3828 | - Цей пакет необхідний для роботи з реальним DOM, але в більшості випадків, після початкової установки, вам не потрібно вручну викликати ці методи, оскільки вони автоматично використовуються за допомогою інструментів для компіляції та рендерингу.
3829 | 
3830 | </details>
3831 | 
3832 | <details>
3833 | <summary>70. Як використовувати React.lazy та React.Suspense для запуску коду програми?</summary>
3834 | 
3835 | #### React
3836 | 
3837 | - `React.lazy` та `React.Suspense` використовуються для **_динамічного завантаження компонентів_** в React, що дозволяє реалізувати **_розподілений рендеринг_** (code splitting). Це означає, що частини коду завантажуються лише тоді, коли вони необхідні, покращуючи тим самим продуктивність вашої програми.
3838 | 
3839 | #### Як це працює:
3840 | 
3841 | 1. `React.lazy()` дозволяє відкладено завантажувати компонент.
3842 | 
3843 | 2. `React.Suspense` використовується для обгортання частини коду, який ще не завантажений, і дозволяє показувати запасний контент (наприклад, лоадер), поки компоненти не завантажаться.
3844 | 
3845 | #### Приклад:
3846 | 
3847 | 1. **Динамічне завантаження компонента:**
3848 | 
3849 | - Спочатку створіть компонент, який буде завантажуватися динамічно.
3850 | 
3851 | ```jsx
3852 | // Динамічно завантажуваний компонент
3853 | const MyComponent = React.lazy(() => import("./MyComponent"));
3854 | ```
3855 | 
3856 | 2. **Обгортка з `React.Suspense`:**
3857 | 
3858 | - Тепер використовуйте `React.Suspense`, щоб показати лоадер під час завантаження компонента.
3859 | 
3860 | ```jsx
3861 | function App() {
3862 |   return (
3863 |     <div>
3864 |       <h1>Моя програма</h1>
3865 | 
3866 |       {/* Обгортка для динамічно завантажуваних компонентів */}
3867 |       <React.Suspense fallback={<div>Завантаження...</div>}>
3868 |         <MyComponent />
3869 |       </React.Suspense>
3870 |     </div>
3871 |   );
3872 | }
3873 | ```
3874 | 
3875 | 3. **Опис:**
3876 | 
3877 | - `React.lazy()` приймає функцію, яка динамічно імпортує модуль.
3878 | 
3879 | - `React.Suspense` обгортатиме компонент, що використовує React.lazy(), і покаже запасний контент (в даному випадку, текст "Завантаження..."), поки компонент не завантажиться.
3880 | 
3881 | #### Переваги:
3882 | 
3883 | - Покращує продуктивність, завантажуючи компоненти лише тоді, коли це необхідно.
3884 | 
3885 | - Зменшує розмір початкового завантаження, оскільки частини програми завантажуються на вимогу.
3886 | 
3887 | Це підхід особливо корисний у великих програмах, де можна розділити код на частини, щоб зменшити час завантаження сторінки.
3888 | 
3889 | </details>
3890 | 
3891 | ### Безпека
3892 | 
3893 | <details>
3894 | <summary>71. Найкращі практики безпеки в React?</summary>
3895 | 
3896 | #### React
3897 | 
3898 | #### Найкращі практики безпеки в React:
3899 | 
3900 | 1. **Запобігання XSS (Cross-Site Scripting):**
3901 | 
3902 | - Завжди очищуйте дані, що надходять від користувача, перед їх відображенням у компоненті.
3903 | - Використовуйте JSX (React автоматично очищає вводи, але слід уникати використання `dangerouslySetInnerHTML`).
3904 | - Якщо потрібно використовувати `dangerouslySetInnerHTML`, переконайтеся, що вміст надійно очищений.
3905 | 
3906 | 2. **Уникайте ін'єкцій коду:**
3907 | 
3908 | - Ніколи не передавайте дані без перевірки у `eval()`, `setTimeout()`, `setInterval()` або інші функції, які виконують код.
3909 | - Для динамічного імпорту використовуйте функціональність з вбудованим контролем (наприклад, `React.lazy()`).
3910 | 
3911 | 3. **Безпечний доступ до API:**
3912 | 
3913 | - Використовуйте HTTPS для захисту даних, що передаються через мережу.
3914 | - Використовуйте автентифікацію та авторизацію, а також захищені куки (HTTPOnly, Secure).
3915 | 
3916 | 4. **Захист від CSRF (Cross-Site Request Forgery):**
3917 | 
3918 | - Використовуйте токени CSRF для перевірки всіх запитів, які змінюють дані на сервері.
3919 | - Використовуйте флаг `SameSite` для cookies, щоб обмежити доступ до них тільки на тому ж домені.
3920 | 
3921 | 5. **Контроль доступу:**
3922 | 
3923 | - Перевіряйте, чи є в користувача права на виконання запитуваної дії перед тим, як відправити запит на сервер.
3924 | - Не довіряйте клієнтським перевіркам. Всі перевірки на сервері повинні бути остаточними.
3925 | 
3926 | 6. **Захист від відкритих редагувальних полів:**
3927 | 
3928 | - Для форм і полів, що приймають дані від користувачів, встановлюйте обмеження на допустимі значення.
3929 | 
3930 | 7. **Оновлення залежностей:**
3931 | 
3932 | - Регулярно перевіряйте і оновлюйте залежності для виявлення потенційних вразливостей. Використовуйте `npm audit` або інші інструменти для цього.
3933 | 
3934 | 8. **Керування секретами:**
3935 | 
3936 | - Не зберігайте секрети (API-ключі, паролі тощо) в клієнтському коді. Вони повинні бути на сервері або в середовищах, таких як перемінні оточення.
3937 | 
3938 | 9. **Використання Content Security Policy (CSP):**
3939 | 
3940 | - Використовуйте CSP для запобігання виконанню небажаних скриптів на вашому сайті.
3941 | 
3942 | 10. **Захист від Clickjacking:**
3943 | 
3944 | - Використовуйте заголовки `X-Frame-Options` або `Content-Security-Policy` для запобігання вашому сайту бути вбудованим в `<iframe>` на інших веб-сайтах.
3945 | 
3946 | Дотримання цих практик допоможе знизити ризики безпеки в React-додатках.
3947 | 
3948 | </details>
3949 | 
3950 | <details>
3951 | <summary>72. Як обробляти помилки в React за допомогою Error Boundary?</summary>
3952 | 
3953 | #### React
3954 | 
3955 | - **Error Boundaries** у React дозволяють ловити помилки у компонентах під час рендерингу, в методах життєвого циклу та в конструкторах, а також обробляти їх без повного зупинення додатку.
3956 | 
3957 | #### Основні моменти:
3958 | 
3959 | - Error Boundary — це компонент, який обгортає інші компоненти і може ловити помилки, що виникають в їхньому коді.
3960 | 
3961 | - Error Boundaries ловлять лише помилки, що сталися в їхніх нащадках. Вони не ловлять помилки в самому Error Boundary.
3962 | 
3963 | #### Як реалізувати Error Boundary:
3964 | 
3965 | 1. **Створення Error Boundary:** Для створення Error Boundary потрібно реалізувати два методи:
3966 | 
3967 | - `static getDerivedStateFromError(error)` — оновлює стан при виникненні помилки.
3968 | 
3969 | - `componentDidCatch(error, info)` — дозволяє реєструвати помилки (наприклад, надсилати їх на сервер).
3970 | 
3971 | ```jsx
3972 | class ErrorBoundary extends React.Component {
3973 |   constructor(props) {
3974 |     super(props);
3975 |     this.state = { hasError: false, error: null };
3976 |   }
3977 | 
3978 |   static getDerivedStateFromError(error) {
3979 |     // Оновлюємо стан, щоб показати запасний UI
3980 |     return { hasError: true, error };
3981 |   }
3982 | 
3983 |   componentDidCatch(error, info) {
3984 |     // Логіка для реєстрації помилок (наприклад, на сервер)
3985 |     console.error("Error caught:", error, info);
3986 |   }
3987 | 
3988 |   render() {
3989 |     if (this.state.hasError) {
3990 |       // Показуємо запасний UI, якщо сталася помилка
3991 |       return <h1>Щось пішло не так.</h1>;
3992 |     }
3993 | 
3994 |     return this.props.children;
3995 |   }
3996 | }
3997 | ```
3998 | 
3999 | 2. **Використання Error Boundary:** Обгортаємо компоненти, які можуть викликати помилки, у `ErrorBoundary`.
4000 | 
4001 | ```jsx
4002 | const App = () => {
4003 |   return (
4004 |     <ErrorBoundary>
4005 |       <MyComponent />
4006 |     </ErrorBoundary>
4007 |   );
4008 | };
4009 | ```
4010 | 
4011 | 3. **Запасний інтерфейс:** Коли помилка відбувається, в ErrorBoundary можна показати запасний інтерфейс (наприклад, повідомлення про помилку, кнопку для повторної спроби або навіть дії для відновлення додатку).
4012 | 
4013 | #### Важливі моменти:
4014 | 
4015 | - Error Boundary не ловить помилки в обробниках подій (наприклад, onClick), асинхронних кодах, таймерах чи мережевих запитах. Для цих випадків використовуй try-catch або інші механізми.
4016 | 
4017 | - Якщо помилка сталася у самому Error Boundary, вона не буде зловлена.
4018 | 
4019 | Error Boundaries корисні для стабільності додатку, дозволяючи перехоплювати та обробляти помилки, не зупиняючи весь додаток.
4020 | 
4021 | </details>
4022 | 
4023 | ### Додаткові концепції
4024 | 
4025 | <details>
4026 | <summary>73. Що таке інверсія спадкування (Inheritance Inversion)?</summary>
4027 | 
4028 | #### React
4029 | 
4030 | - **Інверсія спадкування (Inheritance Inversion)** — це ситуація, коли клас, який мав би бути базовим, фактично залежить від його нащадків або втрачає контроль над логікою, що повинна бути у спадковій ієрархії.
4031 | 
4032 | #### Проблеми інверсії спадкування
4033 | 
4034 | - Порушення принципу Liskov Substitution (LSP).
4035 | 
4036 | - Важко змінювати або розширювати базовий клас без впливу на всі його нащадки.
4037 | 
4038 | - Збільшення складності через взаємозалежності.
4039 | 
4040 | #### Приклад поганої практики
4041 | 
4042 | ```js
4043 | class Parent {
4044 |   method() {
4045 |     throw new Error("Метод має бути реалізований у нащадку");
4046 |   }
4047 | }
4048 | 
4049 | class Child extends Parent {
4050 |   method() {
4051 |     return "Реалізація в нащадку";
4052 |   }
4053 | }
4054 | ```
4055 | 
4056 | - Тут базовий клас не має власної логіки і змушує нащадків реалізовувати поведінку, що є ознакою інверсії спадкування.
4057 | 
4058 | #### Альтернатива: Композиція замість спадкування
4059 | 
4060 | ```js
4061 | class Behavior {
4062 |   method() {
4063 |     return "Реалізація без інверсії";
4064 |   }
4065 | }
4066 | 
4067 | class Parent {
4068 |   constructor() {
4069 |     this.behavior = new Behavior();
4070 |   }
4071 | 
4072 |   method() {
4073 |     return this.behavior.method();
4074 |   }
4075 | }
4076 | ```
4077 | 
4078 | - Цей підхід усуває залежність батьківського класу від нащадків, роблячи код гнучкішим.
4079 | 
4080 | </details>
4081 | 
4082 | <details>
4083 | <summary>74. Що таке "опитування" (Polling)? Як його реалізувати у React?</summary>
4084 | 
4085 | #### React
4086 | 
4087 | - **Опитування (Polling)** — це періодичне надсилання запитів до сервера для отримання оновлених даних. Це корисно, коли сервер не підтримує WebSockets або Server-Sent Events, а клієнт має отримувати нову інформацію без необхідності перезавантаження сторінки.
4088 | 
4089 | #### Реалізація Polling у React
4090 | 
4091 | - Опитування можна реалізувати через `setInterval`, `setTimeout` або використовуючи React-хуки (`useEffect`).
4092 | 
4093 | 1. **Використання `setInterval`**
4094 | 
4095 | ```jsx
4096 | import { useState, useEffect } from "react";
4097 | 
4098 | const PollingComponent = () => {
4099 |   const [data, setData] = useState(null);
4100 | 
4101 |   useEffect(() => {
4102 |     const fetchData = async () => {
4103 |       const response = await fetch("https://api.example.com/data");
4104 |       const result = await response.json();
4105 |       setData(result);
4106 |     };
4107 | 
4108 |     fetchData(); // Виконати одразу при завантаженні
4109 | 
4110 |     const interval = setInterval(fetchData, 5000); // Опитування кожні 5 сек.
4111 | 
4112 |     return () => clearInterval(interval); // Очищення при розмонтуванні
4113 |   }, []);
4114 | 
4115 |   return <div>{data ? JSON.stringify(data) : "Завантаження..."}</div>;
4116 | };
4117 | ```
4118 | 
4119 | - fetchData() отримує дані із сервера.
4120 | - setInterval запускає опитування кожні 5 секунд.
4121 | - clearInterval зупиняє опитування при розмонтуванні.
4122 | 
4123 | 2. **Використання `setTimeout` для динамічного інтервалу**
4124 | 
4125 | - Якщо сервер має обмеження по запитах, краще використовувати setTimeout, щоб уникнути накладання запитів.
4126 | 
4127 | ```jsx
4128 | const PollingComponent = () => {
4129 |   const [data, setData] = useState(null);
4130 | 
4131 |   useEffect(() => {
4132 |     let isMounted = true;
4133 | 
4134 |     const fetchData = async () => {
4135 |       try {
4136 |         const response = await fetch("https://api.example.com/data");
4137 |         const result = await response.json();
4138 |         if (isMounted) setData(result);
4139 |       } catch (error) {
4140 |         console.error("Помилка запиту", error);
4141 |       } finally {
4142 |         if (isMounted) setTimeout(fetchData, 5000);
4143 |       }
4144 |     };
4145 | 
4146 |     fetchData();
4147 | 
4148 |     return () => {
4149 |       isMounted = false; // Запобігає оновленню стану після розмонтування
4150 |     };
4151 |   }, []);
4152 | 
4153 |   return <div>{data ? JSON.stringify(data) : "Завантаження..."}</div>;
4154 | };
4155 | ```
4156 | 
4157 | - Тут setTimeout викликається лише після завершення попереднього запиту, що дозволяє уникнути накладання запитів.
4158 | 
4159 | #### Висновок
4160 | 
4161 | - setInterval підходить для постійного опитування, але може створювати накладення запитів.
4162 | - setTimeout дає більше контролю і краще підходить для адаптивного опитування.
4163 | - У разі великих навантажень варто розглянути WebSockets або Server-Sent Events.
4164 | 
4165 | </details>
4166 | 
4167 | <details>
4168 | <summary>75. Як у React реалізувати двостороннє зв'язування даних?</summary>
4169 | 
4170 | #### React
4171 | 
4172 | - У React двостороннє зв’язування даних реалізується через **керовані компоненти** (controlled components), де стан (`state`) компонента синхронізується з полем вводу (`input`).
4173 | 
4174 | #### Приклад реалізації
4175 | 
4176 | ```jsx
4177 | import { useState } from "react";
4178 | 
4179 | const TwoWayBinding = () => {
4180 |   const [value, setValue] = useState("");
4181 | 
4182 |   return (
4183 |     <div>
4184 |       <input
4185 |         type="text"
4186 |         value={value}
4187 |         onChange={(e) => setValue(e.target.value)}
4188 |       />
4189 |       <p>Введене значення: {value}</p>
4190 |     </div>
4191 |   );
4192 | };
4193 | 
4194 | export default TwoWayBinding;
4195 | ```
4196 | 
4197 | #### Як це працює?
4198 | 
4199 | 1. `value` зберігає поточний стан введеного значення.
4200 | 
4201 | 2. `onChange` оновлює стан при зміні `input`.
4202 | 
4203 | 3. Оновлений `value` відображається в інтерфейсі, забезпечуючи двосторонній зв’язок.
4204 | 
4205 | - Цей підхід дозволяє контролювати введені дані, робити валідацію та обробку перед оновленням стану.
4206 | 
4207 | </details>
4208 | 
4209 | <details>
4210 | <summary>76. Що таке зворотний потік даних (Reverse Data Flow) у React?</summary>
4211 | 
4212 | #### React
4213 | 
4214 | - Зворотний потік даних (Reverse Data Flow) у React означає передачу змін у стані від дочірнього компонента до батьківського компонента. Це протилежність звичайному потоку даних, де батьківський компонент передає пропси дочірньому компоненту.
4215 | 
4216 | #### У React зворотний потік даних зазвичай реалізується через:
4217 | 
4218 | 1. **Callback-функції:**
4219 | 
4220 | - Дочірній компонент викликає callback, переданий йому через пропси, щоб повідомити батьківський компонент про зміни в своєму стані або виконати якісь дії.
4221 | 
4222 | - Наприклад, при оновленні значення в дочірньому компоненті, можна викликати функцію з батьківського компонента, яка оновлює стан.
4223 | 
4224 | 2. **Приклад:**
4225 | 
4226 | ```jsx
4227 | function Parent() {
4228 |   const [value, setValue] = useState("");
4229 | 
4230 |   const handleChange = (newValue) => {
4231 |     setValue(newValue);
4232 |   };
4233 | 
4234 |   return <Child onValueChange={handleChange} />;
4235 | }
4236 | 
4237 | function Child({ onValueChange }) {
4238 |   return <input type="text" onChange={(e) => onValueChange(e.target.value)} />;
4239 | }
4240 | ```
4241 | 
4242 | - У цьому прикладі дочірній компонент передає значення в батьківський через функцію onValueChange, що реалізує зворотний потік даних.
4243 | 
4244 | </details>
4245 | 
4246 | <details>
4247 | <summary>77. Що таке мутація стану і як їй запобігти?</summary>
4248 | 
4249 | #### React
4250 | 
4251 | - Мутація стану — це пряме змінювання об'єкта або масиву, що зберігає стан, без створення копії. В React це призводить до непередбачуваних результатів, оскільки React не знає, що стан змінився, і не перерендерить компонент.
4252 | 
4253 | #### Щоб запобігти мутації стану, треба:
4254 | 
4255 | 1. **Створювати копії даних** перед їх зміною. Наприклад, для масивів та об'єктів:
4256 | 
4257 | - Для масивів: `setItems([...items, newItem])`
4258 | - Для об'єктів: `setUser({...user, name: 'John'})`
4259 | 
4260 | 2. **Використовувати методи, що не мутують дані**, як `map()`, `filter()`, `reduce()` для масивів, або `Object.assign()` для об'єктів.
4261 | 
4262 | - Це дозволяє React коректно відслідковувати зміни та перерендерювати компоненти.
4263 | - </details>
4264 | 
4265 | <details>
4266 | <summary>78. Що таке строгий режим (Strict Mode) React? Його переваги?</summary>
4267 | 
4268 | #### React
4269 | 
4270 | - **Strict Mode** — це спеціальний інструмент React для виявлення потенційних проблем у коді. Він не впливає на роботу у продакшені, але допомагає покращити якість коду під час розробки.
4271 | 
4272 | - Активується обгорткою компонентів у `<React.StrictMode>`:
4273 | 
4274 | ```jsx
4275 | import React from "react";
4276 | import ReactDOM from "react-dom/client";
4277 | import App from "./App";
4278 | 
4279 | const root = ReactDOM.createRoot(document.getElementById("root"));
4280 | root.render(
4281 |   <React.StrictMode>
4282 |     <App />
4283 |   </React.StrictMode>
4284 | );
4285 | ```
4286 | 
4287 | #### Переваги Strict Mode
4288 | 
4289 | | **Функція**                                       | **Опис**                                                                                                    |
4290 | | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
4291 | | **Виявлення небезпечних методів життєвого циклу** | Попереджає про застарілі методи (`componentWillMount`, `componentWillReceiveProps`, `componentWillUpdate`). |
4292 | | **Двічі викликає функції під час розробки**       | Допомагає знайти побічні ефекти у `useEffect` та інших хуках.                                               |
4293 | | **Попереджає про використання застарілого API**   | Вказує на старі контексти (`contextType`) та небезпечні патерни.                                            |
4294 | | **Виявляє непередбачувану поведінку**             | Наприклад, викликає `useEffect` двічі, щоб перевірити коректність очистки ефектів.                          |
4295 | 
4296 | #### Чи варто його використовувати?
4297 | 
4298 | - Так, якщо ти хочеш уникнути проблем ще на етапі розробки. Він може трохи дратувати через подвійний рендер, але це допомагає знаходити приховані помилки в коді.
4299 | 
4300 | </details>
4301 | 
4302 | <details>
4303 | <summary>79. Які рекомендовані способи перевірки статичних типів?</summary>
4304 | 
4305 | #### React
4306 | 
4307 | 1. **TypeScript:** Найбільш популярний та повний підхід для статичної типізації в JavaScript/React. TypeScript додає строгі типи до вашого коду, дозволяючи перевіряти типи на етапі компіляції.
4308 | 
4309 | 2. **PropTypes:** Вбудований механізм для перевірки типів пропсів у React компонентах. Використовується для валідації типів під час виконання. Це не дає статичної типізації на етапі компіляції, але дозволяє перевіряти пропси під час виконання додатка.
4310 | 
4311 | ```jsx
4312 | MyComponent.propTypes = {
4313 |   name: PropTypes.string.isRequired,
4314 |   age: PropTypes.number,
4315 | };
4316 | ```
4317 | 
4318 | 3. **Flow:** Інший механізм для статичної типізації в JavaScript. Flow є менш популярним, ніж TypeScript, але також дозволяє додавати типи та перевіряти їх на етапі компіляції.
4319 | 
4320 | 4. **ESLint з плагінами для типізації:** Можна використовувати ESLint з плагінами для перевірки типів (наприклад, eslint-plugin-flowtype або eslint-plugin-typescript), але це не дає такої глибини типізації, як TypeScript.
4321 | 
4322 | - Рекомендую використовувати TypeScript, оскільки він інтегрується з React та іншими інструментами і надає повну статичну типізацію на етапі компіляції.
4323 | 
4324 | </details>
4325 | 
4326 | ### Анімація
4327 | 
4328 | <details>
4329 | <summary>80. Як реалізувати анімацію в React?</summary>
4330 | 
4331 | #### React
4332 | 
4333 | 1. **CSS анімації:** Найпростіший спосіб — використання стандартних CSS анімацій або переходів.
4334 | 
4335 | ```jsx
4336 | 
4337 | <div className="my-element">Hello</div>
4338 | 
4339 | <style jsx>{`
4340 |   .my-element {
4341 |     animation: fadeIn 1s ease-in-out;
4342 |   }
4343 | 
4344 |   @keyframes fadeIn {
4345 |     0% { opacity: 0; }
4346 |     100% { opacity: 1; }
4347 |   }
4348 | `}</style>
4349 | ```
4350 | 
4351 | 2. **React Transition Group:** Для більш складних анімаційних переходів між компонентами. Цей пакет дозволяє керувати анімацією під час додавання чи видалення компонентів.
4352 | 
4353 | ```jsx
4354 | 
4355 | import { CSSTransition } from 'react-transition-group';
4356 | 
4357 | <CSSTransition in={isVisible} timeout={300} classNames="fade" unmountOnExit>
4358 |   <div>Content</div>
4359 | </CSSTransition>
4360 | 
4361 | <style jsx>{`
4362 |   .fade-enter {
4363 |     opacity: 0;
4364 |   }
4365 |   .fade-enter-active {
4366 |     opacity: 1;
4367 |     transition: opacity 300ms;
4368 |   }
4369 |   .fade-exit {
4370 |     opacity: 1;
4371 |   }
4372 |   .fade-exit-active {
4373 |     opacity: 0;
4374 |     transition: opacity 300ms;
4375 |   }
4376 | `}</style>
4377 | ```
4378 | 
4379 | 3. **Framer Motion:** Це потужна бібліотека для анімацій, яка дозволяє реалізувати складні анімації в React.
4380 | 
4381 | ```jsx
4382 | import { motion } from "framer-motion";
4383 | 
4384 | <motion.div
4385 |   animate={{ opacity: 1 }}
4386 |   initial={{ opacity: 0 }}
4387 |   transition={{ duration: 1 }}
4388 | >
4389 |   Hello
4390 | </motion.div>;
4391 | ```
4392 | 
4393 | 4. **React Spring:** Для фізично базованих анімацій, що дозволяють створювати анімації з реалістичними рухами.
4394 | 
4395 | ```jsx
4396 | import { useSpring, animated } from "react-spring";
4397 | 
4398 | const props = useSpring({ opacity: 1, from: { opacity: 0 } });
4399 | 
4400 | <animated.div style={props}>Hello</animated.div>;
4401 | ```
4402 | 
4403 | 5. **Inline стилі та JavaScript:** Можна використовувати setState та змінювати стилі на основі стану компонента.
4404 | 
4405 | ```jsx
4406 | const [opacity, setOpacity] = useState(0);
4407 | 
4408 | useEffect(() => {
4409 |   setOpacity(1);
4410 | }, []);
4411 | 
4412 | return <div style={{ opacity }}>Hello</div>;
4413 | ```
4414 | 
4415 | - Для складніших анімаційних ефектів рекомендується використовувати **_Framer Motion_** або **_React Spring_**, бо ці бібліотеки дають більше можливостей та легше керувати складними анімаціями.
4416 | 
4417 | </details>
4418 | 
4419 | <details>
4420 | <summary>81. Які самі популярні пакети для анімації у React?</summary>
4421 | 
4422 | #### React
4423 | 
4424 | - **Популярні пакети для анімації в React:**
4425 | 
4426 | 1. **_Framer Motion_** — один з найпопулярніших пакетів для анімацій в React. Простий у використанні, підтримує анімації та переходи, працює з drag-and-drop, а також має потужну API для створення складних анімацій.
4427 | 
4428 | 2. **_React Spring_** — бібліотека для створення фізичних анімацій. Використовує підхід до анімацій, що ґрунтується на фізичних властивостях, таких як пружність і тертя. Добре підходить для складних анімацій і взаємодій.
4429 | 
4430 | 3. **_GSAP (GreenSock Animation Platform)_** — потужна бібліотека для анімацій, яка працює не тільки з React, а й з іншими фреймворками. Відомий своєю швидкістю і можливістю створювати складні, хардкорні анімації.
4431 | 
4432 | 4. **_React Transition Group_** — основна бібліотека для анімацій переходів у React. Вона дозволяє створювати анімації входу, виходу та змін стану компонентів, надаючи гнучкість у визначенні переходів.
4433 | 
4434 | 5. **_Lottie for React_** — дозволяє легко вбудовувати анімації, створені в After Effects, у форматі JSON. Підходить для складних анімацій, таких як іконки або інтерактивні елементи.
4435 | 
4436 | </details>
4437 | 
4438 | ### Тестування та налагодження
4439 | 
4440 | <details>
4441 | <summary>82. React DevTools: Як використовувати для налагодження?</summary>
4442 | 
4443 | #### React
4444 | 
4445 | 1. **Встановлення React DevTools**
4446 | 
4447 | - Якщо використовуєш `Chrome` або `Firefox`, просто встанови розширення `React Developer Tools`:
4448 | 
4449 |   - Chrome Web Store
4450 |   - Firefox Add-ons
4451 | 
4452 | - Якщо налагоджуєш `Electron`, `React Native` або інший нестандартний оточення, встанови:
4453 | 
4454 | ```sh
4455 | npm install -g react-devtools
4456 | react-devtools
4457 | ```
4458 | 
4459 | 2. **Основні вкладки та їх використання**
4460 | 
4461 | - ⚛ **Components** → перегляд структури компонентів, стану та пропсів.
4462 | - ⚡ **Profiler** → аналіз продуктивності та виявлення зайвих рендерів.
4463 | 
4464 | 3. **Дебаг пропсів і стану**
4465 | 
4466 | - Відкрий вкладку Components.
4467 | - Вибери компонент → побачиш його `props`, `state`, `context`.
4468 | - Можеш редагувати `state` і `props` прямо у `DevTools`, щоб тестувати зміну поведінки.
4469 | 
4470 | 4. **Виявлення зайвих рендерів**
4471 | 
4472 | - У вкладці Profiler натисни "Record", зроби взаємодію, натисни "Stop".
4473 | - Перевір кольорове маркування:
4474 |   - **Червоний** → дорогий рендер.
4475 |   - **Жовтий** → середня вартість.
4476 |   - **Синій** → легкий рендер.
4477 | - Оптимізуй компоненти через `React.memo()`, `useMemo()`, `useCallback()`.
4478 | 
4479 | 5. **Інструменти для відладки Context API**
4480 | 
4481 | - Якщо використовуєш React Context, можна перевірити його значення в DevTools.
4482 | - Вибери компонент, який використовує `useContext()`, і знайди вкладку Context.
4483 | 
4484 | 6. **Відладка рендеру в Strict Mode**
4485 | 
4486 | - Якщо `React DevTools` показує, що компонент рендериться двічі, перевір StrictMode у `index.js`:
4487 | 
4488 | ```jsx
4489 | <React.StrictMode>
4490 |   <App />
4491 | </React.StrictMode>
4492 | ```
4493 | 
4494 | - Він не викликає багів, а лише допомагає виявити потенційні проблеми.
4495 | 
4496 | 7. **Інспекція хуків**
4497 | 
4498 | - DevTools дозволяє бачити стан хуків (`useState`, `useEffect`, `useReducer`).
4499 | - У вкладці Components вибери компонент → побачиш стан `useState`.
4500 | 
4501 | #### Висновок:
4502 | 
4503 | - React DevTools — це потужний інструмент для налагодження стану, пропсів, продуктивності та контексту. Використовуй Profiler для оптимізації та Components для відстеження змін у стані та пропсах.
4504 | 
4505 | </details>
4506 | 
4507 | <details>
4508 | <summary>83. Які самі популярні лінтери для React?</summary>
4509 | 
4510 | #### React
4511 | 
4512 | - **Самі популярні лінтери для React:**
4513 | 
4514 | 1. **_ESLint_** — найпоширеніший лінтер для `JavaScript`, який підтримує `React` через плагін `eslint-plugin-react`. Він перевіряє стиль коду, знайомить з помилками і може працювати разом з іншими інструментами, такими як `Prettier` для форматування.
4515 | 
4516 | 2. **_Prettier_** — інструмент для автоматичного форматування коду, часто використовується в комбінації з `ESLint` для забезпечення єдиного стилю коду.
4517 | 
4518 | 3. **_TSLint_** — лінтер для `TypeScript`, який також можна використовувати з `React`, хоча зараз його активно замінюють на `ESLint` через його більшу гнучкість та підтримку.
4519 | 
4520 | - Ці інструменти допомагають підтримувати високий рівень якості коду та запобігають помилкам у великих проектах.
4521 | 
4522 | </details>
4523 | 
4524 | ### Суміжні технології
4525 | 
4526 | <details>
4527 | <summary>84. Що таке Next.js?</summary>
4528 | 
4529 | #### React
4530 | 
4531 | - **Next.js** — це React-фреймворк, який надає готові рішення для серверного рендерингу (SSR), статичної генерації (SSG), API-роутів, маршрутизації, оптимізації продуктивності та SEO.
4532 | 
4533 | #### Основні можливості:
4534 | 
4535 | - **Гібридний рендеринг:** підтримка SSR, SSG та ISR (інкрементального оновлення).
4536 | - **Автоматична маршрутизація:** файли у pages/ автоматично стають маршрутами.
4537 | - **API-роути:** створення серверних ендпоінтів у файлах pages/api/\*.
4538 | - **Оптимізація продуктивності:** автоматичний код-сплітинг, зменшення бандлу.
4539 | - **Підтримка App Router:** новий підхід на основі React Server Components та app/ замість pages/.
4540 | - **Вбудована підтримка Tailwind, TypeScript, ESLint та інших технологій**.
4541 | 
4542 | Використовується для створення високопродуктивних вебзастосунків, блогів, e-commerce рішень та складних інтерфейсів.
4543 | 
4544 | </details>
4545 | 
4546 | <details>
4547 | <summary>85. Які головні відміності між Next.js і React?</summary>
4548 | 
4549 | #### React
4550 | 
4551 | #### Головні відмінності між Next.js і React:
4552 | 
4553 | | **Критерій**                        | **React**                              | **Next.js**                                                              |
4554 | | ----------------------------------- | -------------------------------------- | ------------------------------------------------------------------------ |
4555 | | **Тип**                             | Бібліотека для створення UI            | Фреймворк на базі React                                                  |
4556 | | **Рендеринг**                       | Тільки клієнтський (CSR)               | Підтримує CSR, SSR, SSG, ISR                                             |
4557 | | **Маршрутизація**                   | Реалізується вручну через React Router | Файлова маршрутизація (`pages/` або `app/`)                              |
4558 | | **SEO**                             | Погана підтримка через CSR             | Хороша підтримка SEO (SSR, SSG)                                          |
4559 | | **API-роути**                       | Немає                                  | Вбудована можливість створювати API-ендпоінти (`pages/api/`)             |
4560 | | **Кешування**                       | Немає вбудованих механізмів            | ISR дозволяє оновлювати сторінки без повного перегенерації               |
4561 | | **Оптимізація продуктивності**      | Використання сторонніх рішень          | Вбудовані оптимізації (код-сплітинг, автоматичне завантаження зображень) |
4562 | | **Підтримка серверних компонентів** | Залежить від конфігурації              | Вбудована підтримка React Server Components (`app/`)                     |
4563 | 
4564 | #### Висновок:
4565 | 
4566 | - React підходить для SPA, які рендеряться на клієнті.
4567 | 
4568 | - Next.js краще підходить для SEO-оптимізованих проєктів, гібридного рендерингу та продуктивних вебзастосунків.
4569 | 
4570 | </details>
4571 | 
4572 | <details>
4573 | <summary>86. Для чого потрібен React Helmet Async?</summary>
4574 | 
4575 | #### React
4576 | 
4577 | - **React Helmet Async** — це оптимізована версія **React Helmet**, яка використовується для динамічного оновлення `<head>` (мета-теги, заголовки, Open Graph тощо) у React-додатках.
4578 | 
4579 | #### Навіщо потрібен?
4580 | 
4581 | 1. **SEO-оптимізація** – дозволяє змінювати заголовки сторінок, мета-описи, ключові слова.
4582 | 
4583 | 2. **Динамічний `<head>`** – можна змінювати теги для кожної сторінки без перезавантаження.
4584 | 
4585 | 3. **Підтримка SSR (Server-Side Rendering)** – на відміну від звичайного React Helmet, ця версія коректно працює у SSR-додатках без проблем з асинхронністю.
4586 | 
4587 | #### Приклад використання:
4588 | 
4589 | ```jsx
4590 | import { Helmet } from "react-helmet-async";
4591 | 
4592 | function MyComponent() {
4593 |   return (
4594 |     <Helmet>
4595 |       <title>Головна сторінка</title>
4596 |       <meta name="description" content="Це опис для головної сторінки" />
4597 |     </Helmet>
4598 |   );
4599 | }
4600 | ```
4601 | 
4602 | #### SSR(Next.js, Express);
4603 | 
4604 | ```jsx
4605 | import { HelmetProvider, Helmet } from "react-helmet-async";
4606 | 
4607 | const helmetContext = {};
4608 | const html = renderToString(
4609 |   <HelmetProvider context={helmetContext}>
4610 |     <App />
4611 |   </HelmetProvider>
4612 | );
4613 | const { helmet } = helmetContext;
4614 | 
4615 | const finalHtml = `
4616 | 
4617 |   <html>
4618 |     <head>
4619 |       ${helmet.title.toString()}
4620 |       ${helmet.meta.toString()}
4621 |     </head>
4622 |     <body>${html}</body>
4623 |   </html>
4624 | `;
4625 | ```
4626 | 
4627 | #### Чому краще за `react-helmet`?
4628 | 
4629 | ✅ Підтримує SSR без помилок асинхронності.
4630 | ✅ Легший та швидший.
4631 | ✅ Не створює проблем при `StrictMode`.
4632 | 
4633 | - Висновок: **Якщо потрібен SEO у React + SSR, варто використовувати `react-helmet-async`**.
4634 | 
4635 | </details>
4636 | 
4637 | ### Підхід до розробки
4638 | 
4639 | <details>
4640 | <summary>87. Що таке розподілений компонент (Distributed Component)?</summary>
4641 | 
4642 | #### React
4643 | 
4644 | - **Розподілений компонент (Distributed Component)** — це концепція, коли компонент розбивається на кілька незалежних частин, що можуть рендеритися або виконувати логіку окремо, але працюють разом.
4645 | 
4646 | #### Приклади реалізації:
4647 | 
4648 | 1. **Код-сплітинг (Code Splitting)**
4649 | 
4650 | - Компоненти вантажаться лише при необхідності, що зменшує початковий розмір бандла.
4651 | 
4652 | ```jsx
4653 | import { lazy, Suspense } from "react";
4654 | 
4655 | const LazyComponent = lazy(() => import("./LazyComponent"));
4656 | 
4657 | function App() {
4658 |   return (
4659 |     <Suspense fallback={<div>Завантаження...</div>}>
4660 |       <LazyComponent />
4661 |     </Suspense>
4662 |   );
4663 | }
4664 | ```
4665 | 
4666 | 2. **Компоненти-контейнери (Container-Presentational Pattern)**
4667 | 
4668 | - Виділяє логіку (контейнер) та відображення (презентаційний компонент).
4669 | 
4670 | ```jsx
4671 | function DataContainer({ children }) {
4672 |   const [data, setData] = useState(null);
4673 | 
4674 |   useEffect(() => {
4675 |     fetch("/api/data")
4676 |       .then((res) => res.json())
4677 |       .then(setData);
4678 |   }, []);
4679 | 
4680 |   return children(data);
4681 | }
4682 | 
4683 | function Presentational({ data }) {
4684 |   return <div>{data ? JSON.stringify(data) : "Завантаження..."}</div>;
4685 | }
4686 | 
4687 | function App() {
4688 |   return (
4689 |     <DataContainer>{(data) => <Presentational data={data} />}</DataContainer>
4690 |   );
4691 | }
4692 | ```
4693 | 
4694 | 3. **Мікрофронтенди (Micro Frontends)**
4695 | 
4696 | - Використання окремих автономних компонентів у різних частинах застосунку.
4697 | 
4698 |   - Наприклад, різні команди розробляють окремі частини великого проєкту (`React`, `Vue`, `Angular`) і інтегрують їх разом.
4699 | 
4700 | #### Коли використовувати:
4701 | 
4702 | - Для оптимізації продуктивності (ліниве завантаження).
4703 | 
4704 | - Щоб спростити підтримку коду (відокремлення логіки).
4705 | 
4706 | - Для масштабованих застосунків (мікрофронтенди).
4707 | 
4708 | </details>
4709 | 
4710 | <details>
4711 | <summary>88. Що таке компонент-перемикач (Switching Component)?</summary>
4712 | 
4713 | #### React
4714 | 
4715 | - **Компонент-перемикач (Switching Component)** в React — це патерн, коли компонент динамічно рендерить один із своїх дочірніх компонентів на основі певної умови. Це використовується, коли потрібно відображати різні компоненти залежно від стану, маршруту чи отриманих даних.
4716 | 
4717 | #### Приклад 1: Перемикання на основі стану
4718 | 
4719 | ```jsx
4720 | const SwitchingComponent = ({ type }) => {
4721 |   switch (type) {
4722 |     case "success":
4723 |       return <SuccessMessage />;
4724 |     case "error":
4725 |       return <ErrorMessage />;
4726 |     default:
4727 |       return <DefaultMessage />;
4728 |   }
4729 | };
4730 | ```
4731 | 
4732 | ```jsx
4733 | const App = () => {
4734 |   return <SwitchingComponent type="success" />;
4735 | };
4736 | ```
4737 | 
4738 | - `type` визначає, який компонент буде відображений.
4739 | 
4740 | #### Приклад 2: Використання з React Router
4741 | 
4742 | ```jsx
4743 | import { Route, Routes } from "react-router-dom";
4744 | 
4745 | const App = () => {
4746 |   return (
4747 |     <Routes>
4748 |       <Route path="/" element={<Home />} />
4749 |       <Route path="/about" element={<About />} />
4750 |       <Route path="\*" element={<NotFound />} />
4751 |     </Routes>
4752 |   );
4753 | };
4754 | ```
4755 | 
4756 | - Тут `Routes` виступає як компонент-перемикач для рендерингу відповідного компонента залежно від URL.
4757 | 
4758 | #### Приклад 3: Умовне рендеринг через об'єкт
4759 | 
4760 | ```jsx
4761 | const components = {
4762 |   success: SuccessMessage,
4763 |   error: ErrorMessage,
4764 |   default: DefaultMessage,
4765 | };
4766 | 
4767 | const SwitchingComponent = ({ type }) => {
4768 |   const Component = components[type] || components.default;
4769 |   return <Component />;
4770 | };
4771 | ```
4772 | 
4773 | - Це більш чистий варіант без `switch`.
4774 | 
4775 | Компоненти-перемикачі спрощують логіку та роблять код більш читабельним, коли потрібно умовно рендерити різні компоненти.
4776 | 
4777 | </details>
4778 | 
4779 | ### Просунуті питання
4780 | 
4781 | <details>
4782 | <summary>89. Що таке Reselect та як він працює?</summary>
4783 | 
4784 | #### React
4785 | 
4786 | - Reselect — це бібліотека для створення ефективних селекторів у Redux. Вона допомагає оптимізувати отримання даних зі стану та уникати непотрібних рендерів компонентів за допомогою мемоізації.
4787 | 
4788 | #### Як працює Reselect?
4789 | 
4790 | - Reselect використовує **_мемоізацію_**, щоб повторно використовувати результати обчислень, якщо вхідні дані не змінилися.
4791 | 
4792 | 1. **Приймає "input селектори"**, які отримують дані зі стану.
4793 | 
4794 | 2. **Обчислює значення** на основі отриманих даних.
4795 | 
4796 | 3. **Кешує результат**, щоб не виконувати обчислення при однакових вхідних значеннях.
4797 | 
4798 | #### Приклад використання:
4799 | 
4800 | ```jsx
4801 | import { createSelector } from "reselect";
4802 | 
4803 | // Вхідний селектор отримує всі користувачі
4804 | const selectUsers = (state) => state.users;
4805 | 
4806 | // Вхідний селектор отримує активний фільтр
4807 | const selectFilter = (state) => state.filter;
4808 | 
4809 | // Мемоізований селектор фільтрує користувачів
4810 | export const selectFilteredUsers = createSelector(
4811 |   [selectUsers, selectFilter],
4812 |   (users, filter) => users.filter((user) => user.role === filter)
4813 | );
4814 | ```
4815 | 
4816 | 🔹 Без Reselect компонент перевіряв би весь масив users при кожному рендері.
4817 | 🔹 З Reselect селектор виконується тільки тоді, коли users або filter змінюється.
4818 | 
4819 | #### Переваги Reselect:
4820 | 
4821 | ✅ Зменшує кількість зайвих викликів mapStateToProps.
4822 | ✅ Уникає непотрібних рендерів компонентів.
4823 | ✅ Легко комбінується з Redux.
4824 | ✅ Покращує продуктивність.
4825 | 
4826 | </details>
4827 | 
4828 | <details>
4829 | <summary>90. Які типи даних може повернути render?</summary>
4830 | 
4831 | #### React
4832 | 
4833 | - Метод `render()` у React може повертати:
4834 | 
4835 | 1. **JSX або React-елемент**
4836 | 
4837 | ```jsx
4838 | render() {
4839 | return <div>Hello, World!</div>;
4840 | }
4841 | ```
4842 | 
4843 | 2. **Масив елементів (фрагментований рендеринг)**
4844 | 
4845 | ```jsx
4846 | render() {
4847 | return [
4848 | <li key="1">Item 1</li>,
4849 | <li key="2">Item 2</li>
4850 | ];
4851 | }
4852 | ```
4853 | 
4854 | 3. **Фрагменти (React.Fragment)**
4855 | 
4856 | ```jsx
4857 | render() {
4858 | return (
4859 | <>
4860 | <h1>Title</h1>
4861 | <p>Description</p>
4862 | </>
4863 | );
4864 | }
4865 | ```
4866 | 
4867 | 4. **null (нічого не рендерити)**
4868 | 
4869 | ```jsx
4870 | render() {
4871 | return null;
4872 | }
4873 | ```
4874 | 
4875 | 5. **Булеві значення (ігноруються)**
4876 | 
4877 | ```jsx
4878 | render() {
4879 | return false; // Нічого не відобразиться
4880 | }
4881 | ```
4882 | 
4883 | 6. **Текстові значення (рендеряться як текст)**
4884 | 
4885 | ```jsx
4886 | render() {
4887 | return "Hello, World!";
4888 | }
4889 | ```
4890 | 
4891 | 7. **Портали (рендер у DOM-елемент поза батьківським компонентом)**
4892 | 
4893 | ```jsx
4894 | import { createPortal } from "react-dom";
4895 | 
4896 | render() {
4897 | return createPortal(<div>Modal</div>, document.getElementById("modal-root"));
4898 | }
4899 | ```
4900 | 
4901 | 🚀 Висновок: Основний варіант — JSX або React-елементи, але можна повертати масиви, фрагменти, null, текст або рендерити через портали.
4902 | 
4903 | </details>
4904 | 
4905 | <details>
4906 | <summary>91. Як React обробляє чи обмежує використання пропсів певного типу?</summary>
4907 | 
4908 | #### React
4909 | 
4910 | - React обмежує використання пропсів певного типу за допомогою `PropTypes` або `TypeScript`.
4911 | 
4912 | 1. **Використання PropTypes (вбудована перевірка типів)**
4913 | 
4914 | ```jsx
4915 | import PropTypes from "prop-types";
4916 | 
4917 | const MyComponent = ({ name, age, isActive }) => {
4918 |   return (
4919 |     <div>
4920 |       <h1>{name}</h1>
4921 |       <p>Вік: {age}</p>
4922 |       <p>{isActive ? "Активний" : "Неактивний"}</p>
4923 |     </div>
4924 |   );
4925 | };
4926 | 
4927 | // Визначення типів пропсів
4928 | MyComponent.propTypes = {
4929 |   name: PropTypes.string.isRequired,
4930 |   age: PropTypes.number,
4931 |   isActive: PropTypes.bool,
4932 | };
4933 | ```
4934 | 
4935 | - `PropTypes.string.isRequired` — обов’язковий пропс name.
4936 | - `PropTypes.number` — age має бути числом.
4937 | - `PropTypes.bool` — isActive має бути булевим значенням.
4938 | 
4939 | Якщо передані некоректні типи, React видасть попередження в консолі (тільки у режимі розробки).
4940 | 
4941 | 2. **Використання TypeScript (строга перевірка на рівні компіляції)**
4942 | 
4943 | ```tsx
4944 | Копіювати;
4945 | Редагувати;
4946 | type MyComponentProps = {
4947 |   name: string;
4948 |   age?: number;
4949 |   isActive: boolean;
4950 | };
4951 | 
4952 | const MyComponent: React.FC<MyComponentProps> = ({ name, age, isActive }) => {
4953 |   return (
4954 |     <div>
4955 |       <h1>{name}</h1>
4956 |       <p>Вік: {age}</p>
4957 |       <p>{isActive ? "Активний" : "Неактивний"}</p>
4958 |     </div>
4959 |   );
4960 | };
4961 | ```
4962 | 
4963 | - `name: string` — обов’язковий рядковий пропс.
4964 | - `age?: number` — необов’язковий числовий пропс.
4965 | - `isActive: boolean` — обов’язковий булевий пропс.
4966 | 
4967 | TypeScript дає помилку ще до запуску коду, якщо передані неправильні пропси.
4968 | 
4969 | #### Що вибрати?
4970 | 
4971 | | **Метод**      | **Переваги**                            | **Недоліки**                              |
4972 | | -------------- | --------------------------------------- | ----------------------------------------- |
4973 | | **PropTypes**  | Простий, працює в JavaScript            | Перевіряє лише в runtime, слабка безпека  |
4974 | | **TypeScript** | Строга типізація, ловить помилки раніше | Потрібна компіляція, складніший синтаксис |
4975 | 
4976 | - Якщо проєкт на **TypeScript**, **PropTypes** не потрібен. Якщо **JavaScript**, **PropTypes** дає базову перевірку.
4977 | 
4978 | </details>
4979 | 
4980 | <details>
4981 | <summary>92. Різниця між рендерингом та монтуванням?</summary>
4982 | 
4983 | #### React
4984 | 
4985 | - Різниця між рендерингом та монтуванням у React
4986 | 
4987 | | **Процес**                | **Опис**                                                                                                                                                                                            |
4988 | | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
4989 | | **Монтування (Mounting)** | Компонент створюється і додається в DOM вперше. Викликаються `constructor`, `render`, `componentDidMount` (у класах) або `useEffect` з порожнім масивом залежностей (у функціональних компонентах). |
4990 | | **Рендеринг (Rendering)** | Виконується виклик `render()` або повторний виклик функціонального компонента для оновлення вмісту. Відбувається при зміні `state`, `props` або виклику `forceUpdate()`.                            |
4991 | 
4992 | #### Приклад монтування
4993 | 
4994 | ```jsx
4995 | useEffect(() => {
4996 |   console.log("Компонент змонтовано");
4997 | }, []); // Виконається один раз при монтуванні
4998 | ```
4999 | 
5000 | #### Приклад рендерингу
5001 | 
5002 | ```jsx
5003 | const [count, setCount] = useState(0);
5004 | 
5005 | useEffect(() => {
5006 |   console.log("Компонент відрендерився");
5007 | }); // Виконається при кожному рендері
5008 | 
5009 | return <button onClick={() => setCount(count + 1)}>+</button>;
5010 | ```
5011 | 
5012 | Тут рендер відбувається кожного разу при зміні `count`.
5013 | 
5014 | </details>
5015 | 
5016 | <details>
5017 | <summary>93. Що таке реактивний потік даних (reactive data flow) у React?</summary>
5018 | 
5019 | #### React
5020 | 
5021 | - **Реактивний потік даних (Reactive Data Flow) у React** означає, що зміни в стані або пропсах компонента автоматично призводять до оновлення UI без необхідності вручну викликати ререндеринг.
5022 | 
5023 | #### Основні принципи:
5024 | 
5025 | 1. **Односторонній потік даних** – React передає дані згори вниз (від батьківських до дочірніх компонентів).
5026 | 
5027 | 2. **Декларативність** – Описуємо, "що" треба рендерити, а React сам керує оновленням.
5028 | 
5029 | 3. **Автоматичне оновлення** – Якщо state або props змінюються, React перерендерює лише змінені частини.
5030 | 
5031 | #### Приклад реактивного оновлення:
5032 | 
5033 | ```jsx
5034 | import { useState } from "react";
5035 | 
5036 | function Counter() {
5037 |   const [count, setCount] = useState(0);
5038 | 
5039 |   return (
5040 |     <div>
5041 |       <p>Лічильник: {count}</p>
5042 |       <button onClick={() => setCount(count + 1)}>Збільшити</button>
5043 |     </div>
5044 |   );
5045 | }
5046 | ```
5047 | 
5048 | #### Як це працює?
5049 | 
5050 | - `useState` створює стан `count`.
5051 | 
5052 | - При кліку `setCount(count + 1)` оновлює стан.
5053 | 
5054 | - React автоматично ререндерить компонент із новими даними.
5055 | 
5056 | #### Чи є React повністю реактивним?
5057 | 
5058 | - Ні. На відміну від "реактивних" фреймворків типу Svelte або Solid.js, React не оновлює DOM при зміні змінної напряму. Він використовує Virtual DOM і запускає ререндер при зміні `state` або `props`.
5059 | 
5060 | #### Висновок:
5061 | 
5062 | - Реактивний потік даних у React означає, що UI автоматично оновлюється при зміні стану, але з використанням Virtual DOM і батчингом оновлень для оптимізації.
5063 | 
5064 | </details>
5065 | 
5066 | <details>
5067 | <summary>94. Чи є React реактивним?</summary>
5068 | 
5069 | #### React
5070 | 
5071 | - React не є чисто реактивною бібліотекою, як, наприклад, Vue або Svelte. Однак React має деякі характеристики, які роблять його схожим на реактивні фреймворки:
5072 | 
5073 | 1. **Автоматичне оновлення UI**: React оновлює UI (інтерфейс) автоматично, коли змінюється стан (state) або пропси компонента, що нагадує реактивні підходи. Це відбувається через процес рендерингу та порівняння змін.
5074 | 
5075 | 2. **Функціональні компоненти і хуки**: Використання хуків, таких як `useState`, `useEffect`, створює ефект реактивності, де зміни в стані або пропсах приводять до повторного рендеру компонентів.
5076 | 
5077 | 3. **Часткова реактивність**: React виконує перерендер тільки тих компонентів, чий стан чи пропси змінилися, що є підходом до реактивності, але на відміну від інших фреймворків, React не обробляє залежності або значення з автоматичними спостерігачами.
5078 | 
5079 | - Отже, React має деякі реактивні принципи, але не є повністю реактивним фреймворком.
5080 | 
5081 | </details>
5082 | 
5083 | <details>
5084 | <summary>95. Які варіанти реалізації drag-and-drop у React ти знаєш?</summary>
5085 | 
5086 | #### React
5087 | 
5088 | - Drag-and-drop у React можна реалізувати кількома способами:
5089 | 
5090 |   - **Використання HTML5 API** (`onDragStart`, `onDrop`)
5091 | 
5092 |   - **Бібліотеки** (`react-dnd`, `dnd-kit`)
5093 | 
5094 | 1. **Використання нативного Drag-and-Drop API**
5095 | 
5096 | ```jsx
5097 | import { useState } from "react";
5098 | 
5099 | function DragAndDrop() {
5100 |   const [items, setItems] = useState(["Item 1", "Item 2", "Item 3"]);
5101 | 
5102 |   const onDragStart = (e, index) => {
5103 |     e.dataTransfer.setData("text/plain", index);
5104 |   };
5105 | 
5106 |   const onDrop = (e, targetIndex) => {
5107 |     const sourceIndex = e.dataTransfer.getData("text/plain");
5108 |     const newItems = [...items];
5109 |     const [movedItem] = newItems.splice(sourceIndex, 1);
5110 |     newItems.splice(targetIndex, 0, movedItem);
5111 |     setItems(newItems);
5112 |   };
5113 | 
5114 |   return (
5115 |     <ul>
5116 |       {items.map((item, index) => (
5117 |         <li
5118 |           key={index}
5119 |           draggable
5120 |           onDragStart={(e) => onDragStart(e, index)}
5121 |           onDragOver={(e) => e.preventDefault()}
5122 |           onDrop={(e) => onDrop(e, index)}
5123 |           style={{ padding: "10px", border: "1px solid black", margin: "5px" }}
5124 |         >
5125 |           {item}
5126 |         </li>
5127 |       ))}
5128 |     </ul>
5129 |   );
5130 | }
5131 | 
5132 | export default DragAndDrop;
5133 | ```
5134 | 
5135 | ✅ Простий, без сторонніх бібліотек.
5136 | ❌ Обмежений контроль, не підтримує складні кейси.
5137 | 
5138 | 2. **Використання `react-dnd` (потужніший варіант)**
5139 | 
5140 | ```bash
5141 |    npm install react-dnd react-dnd-html5-backend
5142 | ```
5143 | 
5144 | ```jsx
5145 | import { DndProvider, useDrag, useDrop } from "react-dnd";
5146 | import { HTML5Backend } from "react-dnd-html5-backend";
5147 | import { useState } from "react";
5148 | 
5149 | const ItemType = "ITEM";
5150 | 
5151 | function DraggableItem({ item, index, moveItem }) {
5152 |   const [{ isDragging }, drag] = useDrag({
5153 |     type: ItemType,
5154 |     item: { index },
5155 |     collect: (monitor) => ({
5156 |       isDragging: monitor.isDragging(),
5157 |     }),
5158 |   });
5159 | 
5160 |   const [, drop] = useDrop({
5161 |     accept: ItemType,
5162 |     hover: (draggedItem) => {
5163 |       if (draggedItem.index !== index) {
5164 |         moveItem(draggedItem.index, index);
5165 |         draggedItem.index = index;
5166 |       }
5167 |     },
5168 |   });
5169 | 
5170 |   return (
5171 |     <div
5172 |       ref={(node) => drag(drop(node))}
5173 |       style={{
5174 |         padding: "10px",
5175 |         margin: "5px",
5176 |         border: "1px solid black",
5177 |         backgroundColor: isDragging ? "lightgray" : "white",
5178 |       }}
5179 |     >
5180 |       {item}
5181 |     </div>
5182 |   );
5183 | }
5184 | 
5185 | function DragAndDrop() {
5186 |   const [items, setItems] = useState(["Item 1", "Item 2", "Item 3"]);
5187 | 
5188 |   const moveItem = (from, to) => {
5189 |     const updatedItems = [...items];
5190 |     const [movedItem] = updatedItems.splice(from, 1);
5191 |     updatedItems.splice(to, 0, movedItem);
5192 |     setItems(updatedItems);
5193 |   };
5194 | 
5195 |   return (
5196 |     <DndProvider backend={HTML5Backend}>
5197 |       {items.map((item, index) => (
5198 |         <DraggableItem
5199 |           key={index}
5200 |           item={item}
5201 |           index={index}
5202 |           moveItem={moveItem}
5203 |         />
5204 |       ))}
5205 |     </DndProvider>
5206 |   );
5207 | }
5208 | 
5209 | export default DragAndDrop;
5210 | ```
5211 | 
5212 | ✅ Гнучкий, підтримує складні кейси.
5213 | ✅ Легше працювати з вкладеними елементами.
5214 | ❌ Додає залежність.
5215 | 
5216 | 3. **Використання `dnd-kit` (простий та сучасний варіант)**
5217 | 
5218 | ```bash
5219 |    npm install @dnd-kit/core @dnd-kit/sortable
5220 | ```
5221 | 
5222 | ```jsx
5223 | import { DndContext, closestCenter } from "@dnd-kit/core";
5224 | import { SortableContext, useSortable, arrayMove } from "@dnd-kit/sortable";
5225 | import { useState } from "react";
5226 | 
5227 | function SortableItem({ id }) {
5228 |   const { attributes, listeners, setNodeRef, transform, transition } =
5229 |     useSortable({ id });
5230 | 
5231 |   return (
5232 |     <div
5233 |       ref={setNodeRef}
5234 |       {...attributes}
5235 |       {...listeners}
5236 |       style={{
5237 |         padding: "10px",
5238 |         margin: "5px",
5239 |         border: "1px solid black",
5240 |         backgroundColor: "white",
5241 |         transform: transform ? `translateY(${transform.y}px)` : undefined,
5242 |         transition,
5243 |       }}
5244 |     >
5245 |       {id}
5246 |     </div>
5247 |   );
5248 | }
5249 | 
5250 | function DragAndDrop() {
5251 |   const [items, setItems] = useState(["Item 1", "Item 2", "Item 3"]);
5252 | 
5253 |   const onDragEnd = ({ active, over }) => {
5254 |     if (active.id !== over.id) {
5255 |       setItems((items) => {
5256 |         const oldIndex = items.indexOf(active.id);
5257 |         const newIndex = items.indexOf(over.id);
5258 |         return arrayMove(items, oldIndex, newIndex);
5259 |       });
5260 |     }
5261 |   };
5262 | 
5263 |   return (
5264 |     <DndContext collisionDetection={closestCenter} onDragEnd={onDragEnd}>
5265 |       <SortableContext items={items}>
5266 |         {items.map((id) => (
5267 |           <SortableItem key={id} id={id} />
5268 |         ))}
5269 |       </SortableContext>
5270 |     </DndContext>
5271 |   );
5272 | }
5273 | 
5274 | export default DragAndDrop;
5275 | ```
5276 | 
5277 | ✅ Сучасний API, легший за react-dnd.
5278 | ✅ Простий у використанні.
5279 | ✅ Підтримує сортування (sortable).
5280 | 
5281 | #### Висновок:
5282 | 
5283 | - Якщо потрібно щось просте → **HTML5 Drag-and-Drop API.**
5284 | 
5285 | - Якщо потрібен гнучкий контроль → **react-dnd.**
5286 | 
5287 | - Якщо хочеш сучасний, легкий варіант → **dnd-kit.**
5288 | 
5289 | </details>
5290 | 
5291 | <details>
5292 | <summary>96. Як відрендерити HTML код у React-компоненті?</summary>
5293 | 
5294 | #### React
5295 | 
5296 | - Використовуй `dangerouslySetInnerHTML`, але будь обережний — це може призвести до XSS-атак, якщо вставляєш несанітизовані дані.
5297 | 
5298 | #### Приклад:
5299 | 
5300 | ```jsx
5301 | Копіювати;
5302 | Редагувати;
5303 | function MyComponent() {
5304 |   const htmlContent = "<p style='color: red;'>Це HTML-код</p>";
5305 | 
5306 |   return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
5307 | }
5308 | ```
5309 | 
5310 | - Якщо працюєш з динамічними даними, обов’язково санітизуй їх перед вставкою.
5311 | 
5312 | </details>
5313 | 
5314 | <details>
5315 | <summary>97. Як реалізувати додавання класу за умовою в React?</summary>
5316 | 
5317 | #### React
5318 | 
5319 | - В React умовне додавання класів до елементів зазвичай здійснюється через атрибут `className` і використання тернарного оператора або функцій для визначення умов.
5320 | 
5321 | #### Основні підходи:
5322 | 
5323 | 1. **Тернарний оператор**
5324 | 
5325 | ```jsx
5326 | function MyComponent({ isActive }) {
5327 |   return (
5328 |     <div className={isActive ? "active-class" : "inactive-class"}>Hello</div>
5329 |   );
5330 | }
5331 | ```
5332 | 
5333 | - Якщо `isActive` дорівнює `true`, до елемента буде додано клас `active-class`.
5334 | - Інакше — `inactive-class`.
5335 | 
5336 | 2. **Шаблонні рядки**
5337 | 
5338 | ```jsx
5339 | function MyComponent({ isHighlighted }) {
5340 |   return (
5341 |     <div className={`base-class ${isHighlighted ? "highlighted-class" : ""}`}>
5342 |       Hello
5343 |     </div>
5344 |   );
5345 | }
5346 | ```
5347 | 
5348 | - Завжди додається `base-class`.
5349 | - Якщо `isHighlighted` дорівнює true, додається ще й `highlighted-class`.
5350 | 
5351 | 3. **Бібліотека `clsx`**
5352 | 
5353 | - `clsx` допомагає працювати з класами більш елегантно.
5354 | 
5355 | ```bash
5356 | npm install clsx
5357 | ```
5358 | 
5359 | ```jsx
5360 | import clsx from "clsx";
5361 | 
5362 | function MyComponent({ isActive, isDisabled }) {
5363 |   return (
5364 |     <div
5365 |       className={clsx("base-class", {
5366 |         "active-class": isActive,
5367 |         "disabled-class": isDisabled,
5368 |       })}
5369 |     >
5370 |       Hello
5371 |     </div>
5372 |   );
5373 | }
5374 | ```
5375 | 
5376 | - `clsx` дозволяє легко додавати кілька класів на основі умов.
5377 | 
5378 | 4. **Бібліотека `classnames`**
5379 | 
5380 | - Схожа на `clsx`, але має більше можливостей.
5381 | 
5382 | ```bash
5383 | npm install classnames
5384 | ```
5385 | 
5386 | ```jsx
5387 | import classNames from "classnames";
5388 | 
5389 | function MyComponent({ isActive, isDisabled }) {
5390 |   return (
5391 |     <div
5392 |       className={classNames("base-class", {
5393 |         "active-class": isActive,
5394 |         "disabled-class": isDisabled,
5395 |       })}
5396 |     >
5397 |       Hello
5398 |     </div>
5399 |   );
5400 | }
5401 | ```
5402 | 
5403 | 5. **Винесення логіки в окрему функцію**
5404 | 
5405 | ```jsx
5406 | function getClassName(isActive, isDisabled) {
5407 |   let className = "base-class";
5408 |   if (isActive) className += " active-class";
5409 |   if (isDisabled) className += " disabled-class";
5410 |   return className;
5411 | }
5412 | 
5413 | function MyComponent({ isActive, isDisabled }) {
5414 |   return <div className={getClassName(isActive, isDisabled)}>Hello</div>;
5415 | }
5416 | ```
5417 | 
5418 | - Логіка визначення класів стає більш читабельною та може бути перевикористана.
5419 | 
5420 | #### Висновок:
5421 | 
5422 | - Для простих випадків підійде використання тернарного оператора або шаблонних рядків.
5423 | 
5424 | - Для складних умов краще застосовувати бібліотеки `clsx` або `classnames`, які забезпечують зручність і читаємість коду.
5425 | 
5426 | </details>
5427 | 
5428 | <details>
5429 | <summary>98. Як виконати код перед видаленням компонента з дерева?</summary>
5430 | 
5431 | #### React
5432 | 
5433 | - Щоб виконати код перед видаленням компонента з дерева в React, використовують такі підходи:
5434 | 
5435 | 1. Класові компоненти: componentWillUnmount
5436 | 
5437 | - Для класових компонентів є метод життєвого циклу componentWillUnmount, який викликається перед видаленням компонента.
5438 | 
5439 | ```jsx
5440 | class MyComponent extends React.Component {
5441 |   componentWillUnmount() {
5442 |     console.log("Компонент буде видалено");
5443 |   }
5444 | 
5445 |   render() {
5446 |     return <div>Мій компонент</div>;
5447 |   }
5448 | }
5449 | ```
5450 | 
5451 | 2. Функціональні компоненти: useEffect з очищенням
5452 | 
5453 | - У функціональних компонентах очищення можна зробити в useEffect, повернувши функцію, яка виконається перед видаленням компонента.
5454 | 
5455 | ```jsx
5456 | import { useEffect } from "react";
5457 | 
5458 | function MyComponent() {
5459 |   useEffect(() => {
5460 |     return () => {
5461 |       console.log("Компонент буде видалено");
5462 |     };
5463 |   }, []);
5464 | 
5465 |   return <div>Мій компонент</div>;
5466 | }
5467 | ```
5468 | 
5469 | 3. Обробка перед закриттям сторінки (beforeunload)
5470 | 
5471 | - Якщо потрібно виконати код перед закриттям вкладки або перезавантаженням сторінки:
5472 | 
5473 | ```jsx
5474 | useEffect(() => {
5475 |   const handleUnload = () => {
5476 |     console.log("Сторінка закривається");
5477 |   };
5478 | 
5479 |   window.addEventListener("beforeunload", handleUnload);
5480 |   return () => window.removeEventListener("beforeunload", handleUnload);
5481 | }, []);
5482 | ```
5483 | 
5484 | #### Висновок
5485 | 
5486 | - `componentWillUnmount` – для класових компонентів.
5487 | 
5488 | - `useEffect` із `return` – для функціональних.
5489 | 
5490 | - `beforeunload` – для випадків, коли потрібно реагувати на вихід із сторінки.
5491 | 
5492 | </details>
5493 | 
5494 | <details>
5495 | <summary>99. Що таке useReducer()?</summary>
5496 | 
5497 | #### React
5498 | 
5499 | - `useReducer()` — це хук у React, який використовується для управління станом у функціональних компонентах. Це альтернатива `useState()`, яка підходить для складних логік оновлення стану, особливо якщо зміни залежать від попереднього стану.
5500 | 
5501 | #### Синтаксис:
5502 | 
5503 | ```jsx
5504 | const [state, dispatch] = useReducer(reducer, initialState);
5505 | ```
5506 | 
5507 | - `reducer` — функція, яка приймає `state` і `action`, повертаючи новий стан.
5508 | 
5509 | - `initialState` — початковий стан.
5510 | 
5511 | - `dispatch` — функція для виклику редюсера з певною `action`.
5512 | 
5513 | #### Приклад:
5514 | 
5515 | ```jsx
5516 | import { useReducer } from "react";
5517 | 
5518 | const initialState = { count: 0 };
5519 | 
5520 | function reducer(state, action) {
5521 |   switch (action.type) {
5522 |     case "increment":
5523 |       return { count: state.count + 1 };
5524 |     case "decrement":
5525 |       return { count: state.count - 1 };
5526 |     default:
5527 |       return state;
5528 |   }
5529 | }
5530 | 
5531 | function Counter() {
5532 |   const [state, dispatch] = useReducer(reducer, initialState);
5533 | 
5534 |   return (
5535 |     <div>
5536 |       <p>Count: {state.count}</p>
5537 |       <button onClick={() => dispatch({ type: "increment" })}>+</button>
5538 |       <button onClick={() => dispatch({ type: "decrement" })}>-</button>
5539 |     </div>
5540 |   );
5541 | }
5542 | ```
5543 | 
5544 | #### Коли використовувати:
5545 | 
5546 | - Коли стан має складну логіку або залежності.
5547 | 
5548 | - Коли необхідно уніфікувати оновлення стану через dispatch.
5549 | 
5550 | - Для масштабованості, наприклад, при використанні в глобальному стані.
5551 | 
5552 | </details>
5553 | 
5554 | <details>
5555 | <summary>100. Як використовувати React.lazy та React.Suspense для запуску коду програми?</summary>
5556 | 
5557 | #### React
5558 | 
5559 | - `React.lazy` та `React.Suspense` використовуються для **_динамічного завантаження компонентів_** в React, що дозволяє реалізувати **_розподілений рендеринг_** (code splitting). Це означає, що частини коду завантажуються лише тоді, коли вони необхідні, покращуючи тим самим продуктивність вашої програми.
5560 | 
5561 | #### Як це працює:
5562 | 
5563 | 1. `React.lazy()` дозволяє відкладено завантажувати компонент.
5564 | 
5565 | 2. `React.Suspense` використовується для обгортання частини коду, який ще не завантажений, і дозволяє показувати запасний контент (наприклад, лоадер), поки компоненти не завантажаться.
5566 | 
5567 | #### Приклад:
5568 | 
5569 | 1. **Динамічне завантаження компонента:**
5570 | 
5571 | - Спочатку створіть компонент, який буде завантажуватися динамічно.
5572 | 
5573 | ```jsx
5574 | // Динамічно завантажуваний компонент
5575 | const MyComponent = React.lazy(() => import("./MyComponent"));
5576 | ```
5577 | 
5578 | 2. **Обгортка з `React.Suspense`:**
5579 | 
5580 | - Тепер використовуйте `React.Suspense`, щоб показати лоадер під час завантаження компонента.
5581 | 
5582 | ```jsx
5583 | function App() {
5584 |   return (
5585 |     <div>
5586 |       <h1>Моя програма</h1>
5587 | 
5588 |       {/* Обгортка для динамічно завантажуваних компонентів */}
5589 |       <React.Suspense fallback={<div>Завантаження...</div>}>
5590 |         <MyComponent />
5591 |       </React.Suspense>
5592 |     </div>
5593 |   );
5594 | }
5595 | ```
5596 | 
5597 | 3. **Опис:**
5598 | 
5599 | - `React.lazy()` приймає функцію, яка динамічно імпортує модуль.
5600 | 
5601 | - `React.Suspense` обгортатиме компонент, що використовує React.lazy(), і покаже запасний контент (в даному випадку, текст "Завантаження..."), поки компонент не завантажиться.
5602 | 
5603 | #### Переваги:
5604 | 
5605 | - Покращує продуктивність, завантажуючи компоненти лише тоді, коли це необхідно.
5606 | 
5607 | - Зменшує розмір початкового завантаження, оскільки частини програми завантажуються на вимогу.
5608 | 
5609 | Це підхід особливо корисний у великих програмах, де можна розділити код на частини, щоб зменшити час завантаження сторінки.
5610 | 
5611 | </details>
5612 | 
5613 | <details>
5614 | <summary>101. Які підходи використовуються для виконання HTTP-запитів у React?</summary>
5615 | 
5616 | #### React
5617 | 
5618 | #### Підходи для виконання HTTP-запитів у React
5619 | 
5620 | - React не має вбудованого API для виконання HTTP-запитів, але ви можете використовувати сторонні бібліотеки або стандартні засоби JavaScript. Ось основні підходи:
5621 | 
5622 | 1. **Використання Fetch API**
5623 | 
5624 | - Стандартний інструмент для виконання HTTP-запитів у JavaScript.
5625 | 
5626 | - **_Приклад:_**
5627 | 
5628 | ```jsx
5629 | import React, { useEffect, useState } from "react";
5630 | 
5631 | function FetchExample() {
5632 |   const [data, setData] = useState([]);
5633 |   const [error, setError] = useState(null);
5634 | 
5635 |   useEffect(() => {
5636 |     fetch("https://jsonplaceholder.typicode.com/posts")
5637 |       .then((response) => {
5638 |         if (!response.ok) {
5639 |           throw new Error("Network response was not ok");
5640 |         }
5641 |         return response.json();
5642 |       })
5643 |       .then((data) => setData(data))
5644 |       .catch((error) => setError(error.message));
5645 |   }, []);
5646 | 
5647 |   return (
5648 |     <div>
5649 |       {error ? (
5650 |         <p>Error: {error}</p>
5651 |       ) : (
5652 |         <ul>
5653 |           {data.map((post) => (
5654 |             <li key={post.id}>{post.title}</li>
5655 |           ))}
5656 |         </ul>
5657 |       )}
5658 |     </div>
5659 |   );
5660 | }
5661 | 
5662 | export default FetchExample;
5663 | ```
5664 | 
5665 | 2. **Використання Axios**
5666 | 
5667 | - Бібліотека для виконання HTTP-запитів з простішим синтаксисом та вбудованою підтримкою проміжних обробників (interceptors).
5668 | 
5669 | - **_Приклад:_**
5670 | 
5671 | ```jsx
5672 | import React, { useEffect, useState } from "react";
5673 | import axios from "axios";
5674 | 
5675 | function AxiosExample() {
5676 |   const [data, setData] = useState([]);
5677 |   const [error, setError] = useState(null);
5678 | 
5679 |   useEffect(() => {
5680 |     axios
5681 |       .get("https://jsonplaceholder.typicode.com/posts")
5682 |       .then((response) => setData(response.data))
5683 |       .catch((error) => setError(error.message));
5684 |   }, []);
5685 | 
5686 |   return (
5687 |     <div>
5688 |       {error ? (
5689 |         <p>Error: {error}</p>
5690 |       ) : (
5691 |         <ul>
5692 |           {data.map((post) => (
5693 |             <li key={post.id}>{post.title}</li>
5694 |           ))}
5695 |         </ul>
5696 |       )}
5697 |     </div>
5698 |   );
5699 | }
5700 | 
5701 | export default AxiosExample;
5702 | ```
5703 | 
5704 | 3. **React Query (TanStack Query)**
5705 | 
5706 | - Бібліотека для управління станом даних, отриманих через HTTP-запити. Підтримує кешування, повторні спроби та оновлення даних.
5707 | 
5708 | - **_Приклад:_**
5709 | 
5710 | ```jsx
5711 | import React from "react";
5712 | import { useQuery } from "react-query";
5713 | import axios from "axios";
5714 | 
5715 | function ReactQueryExample() {
5716 |   const { data, error, isLoading } = useQuery("posts", async () => {
5717 |     const response = await axios.get(
5718 |       "https://jsonplaceholder.typicode.com/posts"
5719 |     );
5720 |     return response.data;
5721 |   });
5722 | 
5723 |   if (isLoading) return <p>Loading...</p>;
5724 |   if (error) return <p>Error: {error.message}</p>;
5725 | 
5726 |   return (
5727 |     <ul>
5728 |       {data.map((post) => (
5729 |         <li key={post.id}>{post.title}</li>
5730 |       ))}
5731 |     </ul>
5732 |   );
5733 | }
5734 | 
5735 | export default ReactQueryExample;
5736 | ```
5737 | 
5738 | 4. **GraphQL (Apollo Client)**
5739 | 
5740 | - Для роботи з GraphQL API використовується Apollo Client.
5741 | 
5742 | - **_Приклад:_**
5743 | 
5744 | ```jsx
5745 | import React from "react";
5746 | import { useQuery, gql } from "@apollo/client";
5747 | 
5748 | const GET_POSTS = gql`
5749 |   query GetPosts {
5750 |     posts {
5751 |       id
5752 |       title
5753 |     }
5754 |   }
5755 | `;
5756 | 
5757 | function ApolloExample() {
5758 |   const { loading, error, data } = useQuery(GET_POSTS);
5759 | 
5760 |   if (loading) return <p>Loading...</p>;
5761 |   if (error) return <p>Error: {error.message}</p>;
5762 | 
5763 |   return (
5764 |     <ul>
5765 |       {data.posts.map((post) => (
5766 |         <li key={post.id}>{post.title}</li>
5767 |       ))}
5768 |     </ul>
5769 |   );
5770 | }
5771 | 
5772 | export default ApolloExample;
5773 | ```
5774 | 
5775 | 5. **Custom Hooks**
5776 | 
5777 | - Ви можете створювати власні хуки для повторного використання логіки запитів.
5778 | 
5779 | - **_Приклад:_**
5780 | 
5781 | ```jsx
5782 | import { useState, useEffect } from "react";
5783 | 
5784 | function useFetch(url) {
5785 |   const [data, setData] = useState(null);
5786 |   const [error, setError] = useState(null);
5787 |   const [loading, setLoading] = useState(true);
5788 | 
5789 |   useEffect(() => {
5790 |     fetch(url)
5791 |       .then((response) => response.json())
5792 |       .then((data) => {
5793 |         setData(data);
5794 |         setLoading(false);
5795 |       })
5796 |       .catch((error) => {
5797 |         setError(error.message);
5798 |         setLoading(false);
5799 |       });
5800 |   }, [url]);
5801 | 
5802 |   return { data, error, loading };
5803 | }
5804 | 
5805 | export default useFetch;
5806 | ```
5807 | 
5808 | #### Вибір підходу залежить від ваших потреб:
5809 | 
5810 | - **Fetch API:** для простих запитів.
5811 | 
5812 | - **Axios:** якщо потрібна більша гнучкість (interceptors, тайм-аути).
5813 | 
5814 | - **React Query:** для управління кешем даних.
5815 | 
5816 | - **GraphQL/Apollo Client:** якщо API побудоване на GraphQL.
5817 | 
5818 | - **Custom Hooks:** для повторного використання логіки запитів.
5819 | 
5820 | </details>
5821 | 
5822 | <details>
5823 | <summary>102. Яка різниця між createElement і cloneElement?</summary>
5824 | 
5825 | #### React
5826 | 
5827 | | **Метод**             | **Опис**                                                                                    | **Основне застосування**                                                                |
5828 | | --------------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
5829 | | `React.createElement` | Створює новий елемент React. Приймає тип елемента, пропси та дочірні елементи як аргументи. | Використовується для створення елементів React з нуля, зазвичай під час рендерингу JSX. |
5830 | | `React.cloneElement`  | Клонує існуючий елемент React, дозволяючи змінити його пропси або дочірні елементи.         | Використовується для створення змінених копій вже існуючих елементів React.             |
5831 | 
5832 | #### Приклади:
5833 | 
5834 | `React.createElement`
5835 | 
5836 | ```jsx
5837 | const element = React.createElement(
5838 |   "div",
5839 |   { className: "example" },
5840 |   "Привіт, React!"
5841 | );
5842 | ```
5843 | 
5844 | Результат: створюється `<div class="example">Привіт, React!</div>`.
5845 | 
5846 | `React.cloneElement`
5847 | 
5848 | ```jsx
5849 | const originalElement = <button className="primary">Натисни</button>;
5850 | 
5851 | const clonedElement = React.cloneElement(originalElement, {
5852 |   className: "secondary",
5853 | });
5854 | ```
5855 | 
5856 | Результат: клон `<button class="secondary">Натисни</button>` зі зміненим класом.
5857 | 
5858 | #### Різниця:
5859 | 
5860 | - `createElement`: створює абсолютно новий елемент.
5861 | 
5862 | - `cloneElement`: працює на основі вже існуючого елемента, дозволяючи змінювати його властивості або вміст.
5863 | 
5864 | </details>
5865 | 
5866 | <details>
5867 | <summary>103. Що таке компоненти вищого порядку (Higher-Order components)?</summary>
5868 | 
5869 | #### React
5870 | 
5871 | #### Компоненти вищого порядку (Higher-Order Components, HOC)
5872 | 
5873 | - Компонент вищого порядку — це функція, яка приймає компонент як вхідний аргумент і повертає новий компонент, розширюючи його функціональність.
5874 | 
5875 | #### Синтаксис HOC:
5876 | 
5877 | ```jsx
5878 | const EnhancedComponent = higherOrderComponent(WrappedComponent);
5879 | ```
5880 | 
5881 | #### Особливості HOC:
5882 | 
5883 | 1. Приймає компонент як аргумент.
5884 | 
5885 | 2. Повертає новий компонент із додатковими властивостями чи поведінкою.
5886 | 
5887 | 3. Дозволяє перевикористовувати логіку у різних компонентах.
5888 | 
5889 | #### Приклад використання:
5890 | 
5891 | - HOC для додавання стану до компонента:
5892 | 
5893 | ```jsx
5894 | import React, { useState } from "react";
5895 | 
5896 | // HOC: додає логіку роботи зі станом
5897 | function withCounter(WrappedComponent) {
5898 |   return function EnhancedComponent(props) {
5899 |     const [count, setCount] = useState(0);
5900 | 
5901 |     const increment = () => setCount(count + 1);
5902 | 
5903 |     return <WrappedComponent count={count} increment={increment} {...props} />;
5904 |   };
5905 | }
5906 | 
5907 | // Компонент, який буде розширено
5908 | function Button({ count, increment }) {
5909 |   return <button onClick={increment}>Clicked {count} times</button>;
5910 | }
5911 | 
5912 | // Використання HOC
5913 | const EnhancedButton = withCounter(Button);
5914 | 
5915 | export default EnhancedButton;
5916 | ```
5917 | 
5918 | #### Реальні сценарії використання HOC:
5919 | 
5920 | 1. **Авторизація (Authentication)** — обгортання компонентів для перевірки прав доступу.
5921 | 
5922 | 2. **Обробка даних** — підключення до API чи обробка стану.
5923 | 
5924 | 3. **Логування** — додавання журналювання дій компонентів.
5925 | 
5926 | #### Обмеження HOC:
5927 | 
5928 | - Може створювати глибокі вкладення (component tree), якщо використовувати забагато HOC.
5929 | 
5930 | - Ускладнює читабельність через обгортання компонентів.
5931 | 
5932 | HOC — потужний інструмент для повторного використання логіки, але в сучасних додатках їх часто замінюють React Hooks.
5933 | 
5934 | </details>
5935 | 
5936 | <details>
5937 | <summary>104. Чи підтримує функція lazy іменований експорт?</summary>
5938 | 
5939 | #### React
5940 | 
5941 | - Ні, функція `React.lazy` не підтримує іменований експорт. Вона працює лише з експортом за замовчуванням. Якщо у вас є модуль з іменованим експортом, і ви хочете використовувати його з `React.lazy`, потрібно створити обгортку, яка експортує потрібний компонент за замовчуванням.
5942 | 
5943 | #### Приклад обгортки:
5944 | 
5945 | ```jsx
5946 | // Іменований експорт
5947 | export const MyComponent = () => {
5948 |   return <div>Hello, World!</div>;
5949 | };
5950 | 
5951 | // Використання React.lazy
5952 | const LazyComponent = React.lazy(() =>
5953 |   import("./MyComponent").then((module) => ({ default: module.MyComponent }))
5954 | );
5955 | 
5956 | export default LazyComponent;
5957 | ```
5958 | 
5959 | - Тут ми явно вказуємо, що module.MyComponent має бути використаний як експорт за замовчуванням.
5960 | 
5961 | </details>
5962 | 
5963 | <details>
5964 | <summary>105. Які переваги React?</summary>
5965 | 
5966 | #### React
5967 | 
5968 | #### Переваги React
5969 | 
5970 | 1. **Висока продуктивність**
5971 | 
5972 | - Використання **_Virtual DOM_** мінімізує оновлення реального **_DOM_**, що робить рендеринг швидшим.
5973 | 
5974 | 2. **Компонентний підхід**
5975 | 
5976 | - Додаток складається з **_повторно використовуваних компонентів_**, що спрощує розробку та підтримку.
5977 | 
5978 | 3. **Одностороння передача даних (Unidirectional Data Flow)**
5979 | 
5980 | - Дані передаються вниз по ієрархії компонентів, що спрощує відстеження змін стану.
5981 | 
5982 | 4. **Підтримка хуків (Hooks)**
5983 | 
5984 | - `useState`, `useEffect`, `useMemo` тощо дозволяють керувати станом та ефектами у функціональних компонентах без класів.
5985 | 
5986 | 5. **Серверний рендеринг (SSR) та статична генерація (SSG)**
5987 | 
5988 | - З Next.js можна оптимізувати SEO та покращити продуктивність додатків.
5989 | 
5990 | 6. **Гнучкість та екосистема**
5991 | 
5992 | - React можна використовувати разом із **_Redux_**, **_Zustand_**, **_MobX_**, **_React Query_**, тощо.
5993 | 
5994 | - Підтримує **_React Native_** для створення мобільних додатків.
5995 | 
5996 | 7. **Розширені можливості налагодження**
5997 | 
5998 | - **_React DevTools_** дозволяє переглядати структуру компонентів, стан та пропси в реальному часі.
5999 | 
6000 | 8. **Активна спільнота та підтримка Facebook**
6001 | 
6002 | - Великий вибір бібліотек та готових рішень, швидкий розвиток фреймворку.
6003 | 
6004 | React — це гнучкий, продуктивний і сучасний інструмент для розробки веб-додатків.
6005 | 
6006 | </details>
6007 | 
6008 | <details>
6009 | <summary>106. Які обмеження React?</summary>
6010 | 
6011 | #### React
6012 | 
6013 | 1. **Велика кількість перерендерів:** Якщо компоненти неправильно оптимізовані, це може призвести до надмірних перерендерів, що погіршує продуктивність.
6014 | 
6015 | 2. **Необхідність керувати станом:** Без правильного управління станом додаток може стати складним для підтримки.
6016 | 
6017 | 3. **Однонаправлений потік даних:** Потік даних йде лише в одному напрямку, що може ускладнювати передачу даних через кілька рівнів компонентів.
6018 | 
6019 | 4. **Реактивність:** React оновлює DOM через віртуальний DOM, але це може бути неефективно для великих, динамічних додатків.
6020 | 
6021 | 5. **Залежність від JavaScript:** Погана підтримка без JavaScript на клієнтській стороні.
6022 | 
6023 | 6. **Навчання для новачків:** Хоча концепції React досить прості, правильно освоїти хуки, контексти та оптимізацію може бути важко.
6024 | 
6025 | 7. **Інструменти сторонніх розробників:** Хоча існує велика кількість інструментів, їх інтеграція може бути складною в великих проектах.
6026 | 
6027 | </details>
6028 | 
6029 | <details>
6030 | <summary>107. Для чого призначений метод registerServiceWorker() у React?</summary>
6031 | 
6032 | #### React
6033 | 
6034 | - `registerServiceWorker()` використовувався для реєстрації Service Worker у Create React App (до видалення з CRA у версії 4).
6035 | 
6036 | #### Призначення:
6037 | 
6038 | - Кешування ресурсів для офлайн-режиму
6039 | 
6040 | - Прискорення завантаження додатка
6041 | 
6042 | - Фонове оновлення ресурсів
6043 | 
6044 | #### Приклад використання (до CRA 4):
6045 | 
6046 | ```javascript
6047 | import { register } from "./serviceWorker";
6048 | 
6049 | register();
6050 | ```
6051 | 
6052 | - Після видалення з CRA, Service Worker потрібно налаштовувати вручну через `navigator.serviceWorker.register()`.
6053 | 
6054 | - У **React 19** немає вбудованого `registerServiceWorker()`, оскільки його видалили ще в React 17 (з Create React App 4). Якщо тобі потрібен Service Worker, реєструй його вручну.
6055 | 
6056 | Висновок: у React 19 цей метод більше не актуальний, і Service Worker потрібно налаштовувати самостійно.
6057 | 
6058 | </details>
6059 | 
6060 | <details>
6061 | <summary>108. Що таке синтетичні події (SyntheticEvent) у React?</summary>
6062 | 
6063 | #### React
6064 | 
6065 | - **SyntheticEvent** у React — це обгортка над нативними подіями браузера, яка забезпечує кросбраузерну сумісність і покращує продуктивність.
6066 | 
6067 | #### Особливості SyntheticEvent:
6068 | 
6069 | - Працює однаково у всіх браузерах.
6070 | 
6071 | - Використовує пулізацію (event pooling), що запобігає утриманню зайвих об'єктів у пам’яті.
6072 | 
6073 | - Всі події нормалізовані та мають однакові властивості незалежно від браузера.
6074 | 
6075 | #### Приклад використання:
6076 | 
6077 | ```jsx
6078 | function MyComponent() {
6079 |   const handleClick = (event) => {
6080 |     console.log(event.type); // "click"
6081 |     console.log(event.nativeEvent); // Оригінальна подія браузера
6082 |   };
6083 | 
6084 |   return <button onClick={handleClick}>Натисни</button>;
6085 | }
6086 | ```
6087 | 
6088 | #### Основні методи:
6089 | 
6090 | - `event.preventDefault()` — запобігає стандартній поведінці.
6091 | 
6092 | - `event.stopPropagation()` — зупиняє спливання події.
6093 | 
6094 | - `event.persist()` — вимикає пулізацію, щоб подія не скидалася.
6095 | 
6096 | </details>
6097 | 
6098 | <details>
6099 | <summary>109. Техніки оптимізації перфомансу React?</summary>
6100 | 
6101 | #### React
6102 | 
6103 | #### Техніки оптимізації продуктивності React:
6104 | 
6105 | 1. **Мемоізація компонентів**
6106 | 
6107 | - Використовуйте `React.memo()` для запобігання зайвим ререндерам.
6108 | - `useMemo()` для кешування обчислень.
6109 | - `useCallback()` для збереження стабільності функцій.
6110 | 
6111 | 2. **Оптимізація ререндеру**
6112 | 
6113 | - Уникайте зайвих станів (`useState`) і пропсів.
6114 | - Використовуйте `shouldComponentUpdate`, `React.PureComponent` у класових компонентах.
6115 | - Оптимізуйте контекст (`Context API`) – не передавайте зайві значення.
6116 | - Селектори (`Reselect`, `Zustand`, `Jotai`) для мінімізації оновлень.
6117 | 
6118 | 3. **Віртуалізація списків**
6119 | 
6120 | - `react-window`, `react-virtualized` для відображення лише видимих елементів.
6121 | 
6122 | 4. **Кешування та дебаунс**
6123 | 
6124 | - `useMemo()` та `useCallback()` для важких обчислень.
6125 | - Дебаунс (`lodash.debounce`) або тротлінг (`lodash.throttle`) для введення користувача.
6126 | 
6127 | 5. **Ліниве завантаження (Lazy Loading)**
6128 | 
6129 | - `React.lazy()` + `Suspense` для поділу коду.
6130 | - Динамічний імпорт модулів (`import()`).
6131 | 
6132 | 6. **Уникнення зайвих ефектів в useEffect**
6133 | 
6134 | - Передавайте залежності правильно.
6135 | - Використовуйте `useRef` для збереження значень без ререндеру.
6136 | 
6137 | 7. **Оптимізація зображень**
6138 | 
6139 | - Використовуйте `next/image` у Next.js.
6140 | - Оптимізуйте розміри та формати (`WebP`, `AVIF`).
6141 | 
6142 | 8. **Оптимізація React Router**
6143 | 
6144 | - Використовуйте `React.lazy()` для сторінок.
6145 | - Уникайте зайвого ререндеру шляхом коректного оновлення стану.
6146 | 
6147 | 9. **Розділення стану**
6148 | 
6149 | - Використовуйте локальний state там, де не потрібен глобальний.
6150 | - Виносьте глобальні зміни у `Redux/Zustand/Recoil`.
6151 | 
6152 | 10. **Використання Web Workers**
6153 | 
6154 | - Для важких обчислень, щоб не блокувати головний потік.
6155 | 
6156 | </details>
6157 | 
6158 | <details>
6159 | <summary>110. Чи можливо використовувати async/await у React?</summary>
6160 | 
6161 | #### React
6162 | 
6163 | - Так, можна використовувати `async/await` в React, але є деякі моменти, на які варто звернути увагу:
6164 | 
6165 | 1. **Використання в компонентах:** `async/await` не можна безпосередньо використовувати в самих компонентах або в методах життєвого циклу, таких як `render()`. Однак ви можете використовувати їх в методах обробки подій або в хукках, таких як `useEffect`.
6166 | 
6167 | 2. **Засоби для асинхронних запитів:**
6168 | 
6169 | - Використовуйте async/await всередині функцій, що викликаються в хуках, наприклад:
6170 | 
6171 | ```jsx
6172 | useEffect(() => {
6173 |   const fetchData = async () => {
6174 |     const response = await fetch("https://api.example.com");
6175 |     const data = await response.json();
6176 |     setData(data);
6177 |   };
6178 |   fetchData();
6179 | }, []);
6180 | ```
6181 | 
6182 | 3. **Обробка помилок:** не забувайте використовувати try/catch для обробки помилок при асинхронних запитах:
6183 | 
6184 | ```jsx
6185 | const fetchData = async () => {
6186 |   try {
6187 |     const response = await fetch("https://api.example.com");
6188 |     const data = await response.json();
6189 |     setData(data);
6190 |   } catch (error) {
6191 |     console.error("Error fetching data:", error);
6192 |   }
6193 | };
6194 | ```
6195 | 
6196 | - Таким чином, async/await можна і потрібно використовувати для асинхронних операцій в React, але треба правильно організувати їх використання в рамках компонентів.
6197 | 
6198 | </details>
6199 | 
6200 | <details>
6201 | <summary>111. Яка історія еволюції React?</summary>
6202 | 
6203 | #### React
6204 | 
6205 | - Ось коротка історія еволюції React:
6206 | 
6207 | 1. **2011**
6208 | 
6209 | - React створений у Facebook для внутрішніх потреб. Його розробив інженер Джордан Волке, щоб вирішити проблему ефективного оновлення інтерфейсу.
6210 | 
6211 | 2. **2013**
6212 | 
6213 | - Facebook випустив React як open-source бібліотеку. Спочатку спільнота зустріла її скептично через використання JSX, який здавався незвичним.
6214 | 
6215 | 3. **2015**
6216 | 
6217 | - Випущено React 0.14: розділено React і ReactDOM, що зробило бібліотеку більш модульною.
6218 | 
6219 | - Facebook представив React Native, що дозволило створювати нативні мобільні додатки за допомогою React.
6220 | 
6221 | 4. **2016**
6222 | 
6223 | - Випущено React 15. Основні оновлення торкнулися покращення продуктивності через новий рендеринг-движок.
6224 | 
6225 | 5. **2017**
6226 | 
6227 | - Випущено React 16 (Fiber). Fiber став новою архітектурою, що забезпечила покращену продуктивність та підтримку асинхронного рендерингу.
6228 | 
6229 | - Додано підтримку порталів і помилкових кордонів (Error Boundaries).
6230 | 
6231 | 6. **2018**
6232 | 
6233 | - Facebook представив React Hooks, які дозволили використовувати стан і методи життєвого циклу у функціональних компонентах. Це стало революцією у способі створення компонентів.
6234 | 
6235 | 7. **2019**
6236 | 
6237 | - Випущено React 16.8 з офіційною підтримкою хуків.
6238 | 
6239 | - Покращено ефективність Concurrent Mode (експериментально).
6240 | 
6241 | 8. **2020**
6242 | 
6243 | - Випущено React 17. Головна мета — спрощення поступового оновлення React у великих проектах.
6244 | 
6245 | - Додано підтримку сучасних інструментів і нових можливостей для роботи з JSX.
6246 | 
6247 | 9. **2022**
6248 | 
6249 | - Випущено React 18. Головними нововведеннями стали Concurrent Rendering, новий API useTransition та useDeferredValue, які покращують продуктивність у динамічних додатках.
6250 | 
6251 | 10. **2024**
6252 | 
6253 | - Випущено React 19
6254 | 
6255 | - Оновлений серверний рендеринг (RSC).
6256 | 
6257 | - Підтримка нової use функції.
6258 | 
6259 | - Покращена система форм, помилки рендерингу та синтаксис JSX без import React.
6260 | 
6261 | - Оновлений React Compiler для автоматичної оптимізації продуктивності.
6262 | 
6263 | #### Основні зміни за час еволюції:
6264 | 
6265 | - Від класових компонентів до функціональних з хуками.
6266 | 
6267 | - Підтримка серверного рендерингу (SSR).
6268 | 
6269 | - Concurrent Mode для плавного оновлення інтерфейсу.
6270 | 
6271 | - Інтеграція React із мобільною розробкою через React Native.
6272 | 
6273 | React залишився популярним завдяки високій продуктивності, зручності використання та постійній підтримці від Facebook.
6274 | 
6275 | </details>
6276 | 
6277 | <details>
6278 | <summary>112. Які нововведення було додано в React 19?</summary>
6279 | 
6280 | #### React
6281 | 
6282 | - React 19 представив низку значних оновлень, спрямованих на покращення продуктивності та зручності розробки. Ось ключові нововведення:
6283 | 
6284 | 1. **Нова система рендерингу:** Впроваджено асинхронний рендеринг, що дозволяє React ефективніше керувати оновленнями інтерфейсу, покращуючи взаємодію з користувачем.
6285 | 
6286 | 2. **React Compiler:** Новий компілятор автоматично оптимізує повторні рендери, зменшуючи непотрібні оновлення та підвищуючи продуктивність додатків.
6287 | 
6288 | 3. **Actions API:** Це новий підхід для керування станом та мутаціями даних на сервері, спрощуючи обробку побічних ефектів та запитів до даних.
6289 | 
6290 | 4. **Покращена механіка Suspense:** Надає розробникам тонший контроль над асинхронним завантаженням даних, полегшуючи управління гідратацією компонентів та fallback-станами.
6291 | 
6292 | 5. **Хук `use`:** Новий хук, що спрощує роботу з асинхронними даними та покращує підтримку серверних компонентів.
6293 | 
6294 | 6. **Нативна підтримка метатегів:** Тепер `meta`, `title`, `link` та інші метатеги підтримуються без додаткових бібліотек, що спрощує керування SEO та ресурсами.
6295 | 
6296 | - Ці нововведення роблять React 19 потужнішим та зручнішим інструментом для розробників, покращуючи як продуктивність додатків, так і досвід розробки.
6297 | 
6298 | </details>
6299 | 
6300 | <details>
6301 | <summary>113. Що рекомендують використовувати розробники React після того як React Create App став Deprecated?</summary>
6302 | 
6303 | #### React
6304 | 
6305 | - Після припинення підтримки Create React App у лютому 2025 року, розробникам рекомендується використовувати сучасні фреймворки для створення нових React-додатків. Ці фреймворки підтримують клієнтський рендеринг (CSR) та односторінкові додатки (SPA), які можна розгорнути на CDN або статичних хостингових сервісах без необхідності сервера.
6306 | 
6307 | #### Рекомендовані фреймворки:
6308 | 
6309 | 1. **Next.js:** Пропонує потужні можливості, такі як серверний рендеринг та генерація статичних сайтів, забезпечуючи високу продуктивність та SEO-оптимізацію.
6310 | 
6311 | 2. **React Router:** Надає можливість створення SPA з динамічним маршрутизацією, дозволяючи легко керувати навігацією в додатку.
6312 | 
6313 | 3. **Expo:** Спрощує розробку React Native додатків, забезпечуючи інструменти для створення кросплатформених мобільних додатків з використанням JavaScript та React.
6314 | 
6315 | </details>
6316 | 
6317 | <details>
6318 | <summary>114. Як працює хук useDeferredValue у React?</summary>
6319 | 
6320 | #### React
6321 | 
6322 | `useDeferredValue` — це React-хук, що з'явився у React 18 як частина Concurrent Mode. Він дозволяє відкладати оновлення певних значень (станів чи пропсів), знижуючи їхній пріоритет та надаючи можливість React оновити інтерфейс із більш важливими завданнями у першу чергу.
6323 | 
6324 | Це дуже зручно, якщо значення часто змінюється, а оновлення інтерфейсу на кожну зміну займає багато ресурсів.
6325 | 
6326 | ##### Для чого використовують `useDeferredValue`?
6327 | 
6328 | - Щоб уникнути затримок та лагів у складних застосунках, де швидкість реакції інтерфейсу важлива.
6329 | - Щоб покращити взаємодію користувача, особливо коли змінюється багато даних (пошук, фільтрація, рендер великих списків).
6330 | - Щоб забезпечити плавність анімацій та переходів між станами.
6331 | 
6332 | ##### Як це працює?
6333 | 
6334 | Хук `useDeferredValue` приймає значення та повертає його відкладену версію:
6335 | 
6336 | ```jsx
6337 | const deferredValue = useDeferredValue(value);
6338 | ```
6339 | 
6340 | - React відразу оновлює критичні (пріоритетні) зміни.
6341 | - Відкладене значення (deferredValue) оновлюється асинхронно після того, як React обробить терміновіші завдання.
6342 | - Якщо оновлення основного значення відбуваються надто швидко, React може пропустити деякі проміжні значення і перейти відразу до останнього.
6343 | 
6344 | ##### Приклад використання:
6345 | 
6346 | Уявимо, є компонент із полем пошуку та великим списком, який потрібно фільтрувати при введенні тексту.
6347 | 
6348 | ###### Без використання `useDeferredValue`:
6349 | 
6350 | ```jsx
6351 | import { useState, useMemo } from "react";
6352 | 
6353 | function SearchList({ items }) {
6354 |   const [query, setQuery] = useState("");
6355 | 
6356 |   const filteredItems = useMemo(() => {
6357 |     return items.filter((item) => item.includes(query));
6358 |   }, [items, query]);
6359 | 
6360 |   return (
6361 |     <>
6362 |       <input
6363 |         value={query}
6364 |         onChange={(e) => setQuery(e.target.value)}
6365 |         placeholder="Пошук..."
6366 |       />
6367 |       <List items={filteredItems} />
6368 |     </>
6369 |   );
6370 | }
6371 | ```
6372 | 
6373 | Це може викликати «гальмування», якщо список дуже великий, адже при кожному введенні символу React миттєво перераховує фільтровані результати.
6374 | 
6375 | ###### Із використанням `useDeferredValue`:
6376 | 
6377 | ```jsx
6378 | import { useState, useDeferredValue, useMemo } from "react";
6379 | 
6380 | function SearchList({ items }) {
6381 |   const [query, setQuery] = useState("");
6382 |   const deferredQuery = useDeferredValue(query);
6383 | 
6384 |   const filteredItems = useMemo(() => {
6385 |     return items.filter((item) => item.includes(deferredQuery));
6386 |   }, [items, deferredQuery]);
6387 | 
6388 |   return (
6389 |     <>
6390 |       <input
6391 |         value={query}
6392 |         onChange={(e) => setQuery(e.target.value)}
6393 |         placeholder="Пошук..."
6394 |       />
6395 |       <List items={filteredItems} />
6396 |     </>
6397 |   );
6398 | }
6399 | ```
6400 | 
6401 | У цьому варіанті:
6402 | 
6403 | - Введення користувача завжди миттєве й плавне.
6404 | - Фільтрація списку виконується асинхронно (після того, як користувач зупинить введення або коли знизиться інтенсивність змін).
6405 | - В результаті інтерфейс залишається чуйним.
6406 | 
6407 | 
6408 | ##### Особливості роботи:
6409 | 
6410 | - `useDeferredValue` не встановлює конкретний час затримки (на відміну від debounce). Він дозволяє React автоматично визначати час оновлення залежно від завантаження інтерфейсу.
6411 | - Значення, отримане з `useDeferredValue`, може "відставати" від основного стану, що потрібно враховувати при використанні в логіці додатка.
6412 | 
6413 | 
6414 | ##### Переваги використання:
6415 | 
6416 | - Зменшує навантаження на процесор під час активних взаємодій.
6417 | - Забезпечує стабільний FPS і плавний UI.
6418 | - Робить UX більш комфортним і передбачуваним, особливо у великих та складних додатках.
6419 | 
6420 | ##### Коли краще використовувати `useDeferredValue`?
6421 | 
6422 | - Списки із великою кількістю елементів.
6423 | - Форми з активним фільтруванням та автозаповненням.
6424 | - Всі випадки, коли часте оновлення інтерфейсу може створювати неприємний досвід для користувача.
6425 | 
6426 | </details>
6427 | 
6428 | <details>
6429 | <summary>115. ???</summary>
6430 | 
6431 | #### React
6432 | 
6433 | - Coming Soon... 😎
6434 | </details>
6435 |

--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
 1 | # 🔒 Security Policy
 2 | 
 3 | ## Reporting a Vulnerability
 4 | 
 5 | If you discover a security issue in any of my projects, I would greatly appreciate your help in resolving it responsibly. Here's how you can report it:
 6 | 
 7 | 1. **Contact me:**  
 8 |    Please send an email to **[victor.svertoka@icloud.com](mailto:victor.svertoka@icloud.com)** with:
 9 | 
10 |    - A clear description of the issue.
11 |    - Steps to reproduce the vulnerability.
12 |    - Any relevant code or logs for better understanding.
13 | 
14 | 2. **Handling process:**
15 | 
16 |    - I will acknowledge your report within **48 hours**.
17 |    - Together, we will work on resolving the issue as quickly as possible.
18 | 
19 | 3. **Confidentiality:**  
20 |    Please keep the details of the vulnerability private until it has been resolved.
21 | 
22 | Your cooperation helps ensure the safety and security of my work. Thank you for contributing to a safer tech environment! 🙌
23 |

--------------------------------------------------------------------------------
/assets/code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevLoversTeam/react-interview-questions/46d26655e21f1e787d07cc7b44f6632a2f8ba2b8/assets/code.png

--------------------------------------------------------------------------------
/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><g fill="#61DAFB"><circle cx="64" cy="64" r="11.4"/><path d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3C8.2 50 1.4 56.6 1.4 64s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zM92.5 14.7c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zM81.3 74c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zM64 97.8c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zM64 30.2c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zM31.7 35c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zM7 64c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5C15.3 75.6 7 69.6 7 64zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zM96.3 93c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z"/></g></svg>

--------------------------------------------------------------------------------

Row 1

Row 2

2 | React 3 |

Найпопулярніші запитання та відповіді на співбесіді з React

Hello, world!

Hello, {name}!

Hello

Title

Hello

Hello

Hello, {props.name}!

Hello, {this.props.name}!

Hello, {props.name}!

Hello, {this.props.name}!

Hello, {name}!

Hello, {name}!

Hello, world!

Welcome back!

Please sign up.

{props.isLoggedIn ? "Welcome back!" : "Please sign up."}

You have {props.unreadMessages.length} unread messages.

Title

Title

{item.name}

Hello

Hello, {props.name}!

{this.state.count}

Hello, {this.props.name}!

Hello, {props.name}!

Hello, World!

Hello, World!

Основний контент

Це модальне вікно

Головна сторінка

Title

Title

Title