{"id":22302375,"url":"https://github.com/getfrontend/react-100-questions-ua","last_synced_at":"2025-10-14T00:30:41.756Z","repository":{"id":238745678,"uuid":"795217221","full_name":"getFrontend/react-100-questions-ua","owner":"getFrontend","description":"Запитання з React для підготовки до співбесіди  💙💛","archived":false,"fork":false,"pushed_at":"2024-09-25T20:38:57.000Z","size":577,"stargazers_count":39,"open_issues_count":0,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-06T20:12:48.690Z","etag":null,"topics":["interview-questions","react","react-questions","reactjs"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/getFrontend.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-02T20:18:46.000Z","updated_at":"2025-04-02T16:17:20.000Z","dependencies_parsed_at":"2024-05-19T21:26:23.455Z","dependency_job_id":"df351438-d9bd-46ba-a3eb-83868e24d846","html_url":"https://github.com/getFrontend/react-100-questions-ua","commit_stats":null,"previous_names":["getfrontend/react-100-questions-ua"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/getFrontend/react-100-questions-ua","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getFrontend%2Freact-100-questions-ua","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getFrontend%2Freact-100-questions-ua/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getFrontend%2Freact-100-questions-ua/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getFrontend%2Freact-100-questions-ua/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/getFrontend","download_url":"https://codeload.github.com/getFrontend/react-100-questions-ua/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getFrontend%2Freact-100-questions-ua/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279017353,"owners_count":26086052,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["interview-questions","react","react-questions","reactjs"],"created_at":"2024-12-03T18:36:47.017Z","updated_at":"2025-10-14T00:30:41.417Z","avatar_url":"https://github.com/getFrontend.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Запитання з React для підготовки до співбесіди 💙💛\n\n\u003cimg src=\"https://github.com/getFrontend/react-100-questions-ua/raw/main/github-react-questions-main.jpg\" /\u003e\n\n### Список запитань\n\n| №   | Назва запитання                                                                                                                                                                                  |\n| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| 1   | [Що таке React?](#що-таке-react)                                                                                                                                                                 |\n| 2   | [Які основні переваги використання React?](#які-основні-переваги-використання-react)                                                                                                             |\n| 3   | [Що таке JSX?](#що-таке-jsx)                                                                                                                                                                     |\n| 4   | [Які основні відмінності між компонентами класів і функціональними компонентами в React?](#які-основні-відмінності-між-компонентами-класів-і-функціональними-компонентами-в-react)               |\n| 5   | [Що таке Virtual DOM, та як він працює?](#що-таке-virtual-dom-та-як-він-працює)                                                                                                                  |\n| 6   | [Які методи життєвого циклу компонентів ви знаєте?](#які-методи-життєвого-циклу-компонентів-ви-знаєте)                                                                                           |\n| 7   | [Що таке \"стан\" (state) компонента в React?](#що-таке-стан-state-компонента-в-react)                                                                                                             |\n| 8   | [Як оновити стан компонента?](#як-оновити-стан-компонента)                                                                                                                                       |\n| 9   | [Що таке пропси (props) у React?](#що-таке-пропси-props-у-react)                                                                                                                                 |\n| 10  | [У чому різниця між станом і пропсами в React?](#у-чому-різниця-між-станом-і-пропсами-в-react)                                                                                                   |\n| 11  | [Як обробляти події в React?](#як-обробляти-події-в-react)                                                                                                                                       |\n| 12  | [Що таке умовний рендеринг у React?](#що-таке-умовний-рендеринг-у-react)                                                                                                                         |\n| 13  | [Як передати дані між компонентами вгору та вниз за ієрархією?](#як-передати-дані-між-компонентами-вгору-та-вниз-за-ієрархією)                                                                   |\n| 14  | [Як виконати HTTP-запити в React?](#як-виконати-http-запити-в-react)                                                                                                                             |\n| 15  | [Що таке контекст (context) у React і для чого він використовується?](#що-таке-контекст-context-у-react-і-для-чого-він-використовується)                                                         |\n| 16  | [Як реалізувати PureComponent?](#як-реалізувати-purecomponent)                                                                                                                                   |\n| 17  | [Що таке ключі (keys) у списках React-елементів і навіщо вони потрібні?](#що-таке-ключі-keys-у-списках-react-елементів-і-навіщо-вони-потрібні)                                                   |\n| 18  | [Як використовувати стилі в React-компонентах?](#як-використовувати-стилі-в-react-компонентах)                                                                                                   |\n| 19  | [Що таке «керовані компоненти» (controlled components)?](#що-таке-керовані-компоненти-controlled-components)                                                                                     |\n| 20  | [Що таке «некеровані компоненти» (uncontrolled components)?](#що-таке-некеровані-компоненти-uncontrolled-components)                                                                             |\n| 21  | [Що таке «підйом стану» (lifting state up)?](#що-таке-підйом-стану-lifting-state-up)                                                                                                             |\n| 22  | [Як створити форму в React?](#як-створити-форму-в-react)                                                                                                                                         |\n| 23  | [Як реалізувати умовне додавання класу до елемента в React?](#як-реалізувати-умовне-додавання-класу-до-елемента-в-react)                                                                         |\n| 24  | [Що таке фрагменти (fragments) у React?](#що-таке-фрагменти-fragments-у-react)                                                                                                                   |\n| 25  | [Яким чином можна оптимізувати продуктивність React-додатку?](#яким-чином-можна-оптимізувати-продуктивність-react-додатку)                                                                       |\n| 26  | [Що таке HOC (Higher-Order Component) у React?](#що-таке-hoc-higher-order-component-у-react)                                                                                                     |\n| 27  | [В чем разница между HOC и компонентами с рендер-пропсами (render props)?](#в-чем-разница-между-hoc-и-компонентами-с-рендер-пропсами-render-props)                                               |\n| 28  | [Що таке рефи (refs) у React і як вони використовуються?](#що-таке-рефи-refs-у-react-і-як-вони-використовуються)                                                                                 |\n| 29  | [Як реалізувати анімацію в React-додатку?](#як-реалізувати-анімацію-в-react-додатку)                                                                                                             |\n| 30  | [Як працює механізм \"контексту\" (context) для передачі даних?](#як-працює-механізм-контексту-context-для-передачі-даних)                                                                         |\n| 31  | [Що таке портали (portals) у React?](#що-таке-портали-portals-у-react)                                                                                                                           |\n| 32  | [Як реалізувати lazy loading у React з використанням Suspense?](#як-реалізувати-lazy-loading-у-react-з-використанням-suspense)                                                                   |\n| 33  | [Які нововведення було додано в React 16?](#які-нововведення-було-додано-в-react-16)                                                                                                             |\n| 34  | [Як використовувати React DevTools для налагодження програми?](#як-використовувати-react-devtools-для-налагодження-програми)                                                                     |\n| 35  | [Що таке \"хуки\" (hooks) у React і для чого вони використовуються?](#що-таке-хуки-hooks-у-react-і-для-чого-вони-використовуються)                                                                 |\n| 36  | [Як створити власний хук у React?](#як-створити-власний-хук-у-react)                                                                                                                             |\n| 37  | [Як обробляти помилки в React-додатку за допомогою Error Boundary?](#як-обробляти-помилки-в-react-додатку-за-допомогою-error-boundary)                                                           |\n| 38  | [Як працює алгоритм узгодження (reconciliation) у React?](#як-працює-алгоритм-узгодження-reconciliation-у-react)                                                                                 |\n| 39  | [Які популярні бібліотеки для управління станом ви знаєте, крім вбудованого useState?](#які-популярні-бібліотеки-для-управління-станом-ви-знаєте-крім-вбудованого-usestate)                      |\n| 40  | [Яким чином можна оптимізувати рендеринг компонентів у React?](#яким-чином-можна-оптимізувати-рендеринг-компонентів-у-react)                                                                     |\n| 41  | [Що таке \"глибоке порівняння\" (deep comparison) у контексті оптимізації продуктивності React?](#що-таке-глибоке-порівняння-deep-comparison-у-контексті-оптимізації-продуктивності-react)         |\n| 42  | [Як використовувати memoization для оптимізації компонентів?](#як-використовувати-memoization-для-оптимізації-компонентів)                                                                       |\n| 43  | [Які патерни використання Redux ви знаєте?](#які-патерни-використання-redux-ви-знаєте)                                                                                                           |\n| 44  | [Як працює бібліотека React Router?](#як-працює-бібліотека-react-router)                                                                                                                         |\n| 45  | [Що таке SSR (Server-Side Rendering) та як він відрізняється від CSR (Client-Side Rendering)?](#що-таке-ssr-server-side-rendering-і-як-він-відрізняється-від-csr-client-side-rendering)          |\n| 46  | [Як реалізувати асинхронне завантаження компонентів за допомогою React Router?](#як-реалізувати-асинхронне-завантаження-компонентів-за-допомогою-react-router)                                   |\n| 47  | [Які переваги дає використання Redux для управління станом застосунку?](#які-переваги-дає-використання-redux-для-управління-станом-застосунку)                                                   |\n| 48  | [Що таке Redux Thunk?](#що-таке-redux-thunk)                                                                                                                                                     |\n| 49  | [Як працює Redux Saga?](#як-працює-redux-saga)                                                                                                                                                   |\n| 50  | [Як реалізувати ледаче завантаження Redux-редьюсерів?](#як-реалізувати-ледаче-завантаження-redux-редьюсерів)                                                                                     |\n| 51  | [Що таке \"нормалізація стану\" (state normalization) у контексті керування станом програми?](#що-таке-нормалізація-стану-state-normalization-у-контексті-керування-станом-програми)               |\n| 52  | [Як створити анімований перехід між сторінками за допомогою React Router?](#як-створити-анімований-перехід-між-сторінками-за-допомогою-react-router)                                             |\n| 53  | [Як працюють CSS-модулі (CSS Modules) у React?](#як-працюють-css-модулі-css-modules-у-react)                                                                                                     |\n| 54  | [Що таке Styled Components, та як воно використовується?](#що-таке-styled-components-і-як-воно-використовується)                                                                                 |\n| 55  | [Як передати дані з сервера на клієнт під час використання SSR у React?](#як-передати-дані-з-сервера-на-клієнт-під-час-використання-ssr-у-react)                                                 |\n| 56  | [Які переваги та недоліки мають функціональні компоненти порівняно з компонентами класів?](#які-переваги-та-недоліки-мають-функціональні-компоненти-порівняно-з-компонентами-класів)             |\n| 57  | [Які особливості мають хуки useEffect та useLayoutEffect?](#які-особливості-мають-хуки-useeffect-та-uselayouteffect)                                                                             |\n| 58  | [Як оновити стан компонента після виконання асинхронної операції?](#як-оновити-стан-компонента-після-виконання-асинхронної-операції)                                                             |\n| 59  | [Що таке CSS-in-JS, та які бібліотеки ви знаєте для реалізації цієї концепції в React?](#що-таке-css-in-js-і-які-бібліотеки-ви-знаєте-для-реалізації-цієї-концепції-в-react)                     |\n| 60  | [Як реалізувати drag-and-drop функціональність у React-додатку?](#як-реалізувати-drag-and-drop-функціональність-у-react-додатку)                                                                 |\n| 61  | [Як реалізувати аутентифікацію та авторизацію в React-додатку?](#як-реалізувати-аутентифікацію-та-авторизацію-в-react-додатку)                                                                   |\n| 62  | [Як працює маршрутизація на стороні клієнта в React?](#як-працює-маршрутизація-на-стороні-клієнта-в-react)                                                                                       |\n| 63  | [Що таке «code splitting» (поділ коду) в React?](#що-таке-code-splitting-поділ-коду-в-react)                                                                                                     |\n| 64  | [Як керувати станом між компонентами, що не мають близького зв'язку?](#як-керувати-станом-між-компонентами-що-не-мають-близького-звязку)                                                         |\n| 65  | [Які засоби надає React для тестування компонентів?](#які-засоби-надає-react-для-тестування-компонентів)                                                                                         |\n| 66  | [Як працює \"ледаче завантаження\" (lazy loading) компонентів у React?](#як-працює-ледаче-завантаження-lazy-loading-компонентів-у-react)                                                           |\n| 67  | [Що таке \"синтетичні події\" (synthetic events) у React?](#що-таке-синтетичні-події-synthetic-events-у-react)                                                                                     |\n| 68  | [Як організувати перевикористання компонентів у React?](#як-організувати-перевикористання-компонентів-у-react)                                                                                   |\n| 69  | [Що таке \"високонавантажені компоненти\" (high-order components) та як їх створити?](#що-таке-високонавантажені-компоненти-high-order-components-та-як-їх-створити)                               |\n| 70  | [Яких принципів слід дотримуватися під час іменування компонентів у React?](#яких-принципів-слід-дотримуватися-під-час-іменування-компонентів-у-react)                                           |\n| 71  | [Як реалізувати анімацію переходів між компонентами в React Router?](#як-реалізувати-анімацію-переходів-між-компонентами-в-react-router)                                                         |\n| 72  | [Що таке \"глибоке перенесення стану\" (deep state transfer) у React?](#що-таке-глибоке-перенесення-стану-deep-state-transfer-у-react)                                                             |\n| 73  | [Як реалізувати модальне вікно в React-додатку?](#як-реалізувати-модальне-вікно-в-react-додатку)                                                                                                 |\n| 74  | [Що таке SSR (Server-Side Rendering) і навіщо його використовувати?](#що-таке-ssr-server-side-rendering-і-навіщо-його-використовувати)                                                           |\n| 75  | [Які переваги дає використання CSS-модулів (CSS Modules)?](#які-переваги-дає-використання-css-модулів-css-modules)                                                                               |\n| 76  | [Що таке \"віртуалізація списку\" (list virtualization) та як вона реалізується в React?](#що-таке-віртуалізація-списку-list-virtualization-і-як-вона-реалізується-в-react)                        |\n| 77  | [Як реалізувати include компонентів у React?](#як-реалізувати-include-компонентів-у-react)                                                                                                       |\n| 78  | [Що таке \"консиліація\" (reconciliation) у контексті React?](#що-таке-консиліація-reconciliation-у-контексті-react)                                                                               |\n| 79  | [Як обробляти форми в React?](#як-обробляти-форми-в-react)                                                                                                                                       |\n| 80  | [Альтернативи Redux для керування станом у React-додатках?](#альтернативи-redux-для-керування-станом-у-react-додатках)                                                                           |\n| 81  | [Як працює «гаряча заміна модулів» (Hot Module Replacement) у середовищі розробки React-додатків?](#як-працює-гаряча-заміна-модулів-hot-module-replacement-у-середовищі-розробки-react-додатків) |\n| 82  | [Що таке «мемоізація» (memoization) та як вона може бути застосована в React?](#що-таке-мемоізація-memoization-і-як-вона-може-бути-застосована-в-react)                                          |\n| 83  | [Як реалізувати зв'язування даних (data binding) у React?](#як-реалізувати-зв'язування-даних-data-binding-у-react)                                                                               |\n| 84  | [Що таке «передача даних через контекст» (context passing) у React?](#що-таке-передача-даних-через-контекст-context-passing-у-react)                                                             |\n| 85  | [Як реалізувати перетягування (drag-and-drop) елементів у React-додатку?](#як-реалізувати-перетягування-drag-and-drop-елементів-у-react-додатку)                                                 |\n| 86  | [Що таке «обчислювані властивості» (computed properties) у контексті React?](#що-таке-обчислювані-властивості-computed-properties-у-контексті-react)                                             |\n| 87  | [Як реалізувати «ледаче завантаження» (lazy loading) зображень у React?](#як-реалізувати-ледаче-завантаження-lazy-loading-зображень-у-react)                                                     |\n| 88  | [Що таке «рендер-пропси» (render props) та як вони використовуються?](#що-таке-рендер-пропси-render-props-і-як-вони-використовуються)                                                            |\n| 89  | [Як працює «ледаче завантаження» (lazy loading) сторонніх бібліотек у React?](#як-працює-ледаче-завантаження-lazy-loading-сторонніх-бібліотек-у-react)                                           |\n| 90  | [Що таке «реактивне програмування» (reactive programming) у контексті React?](#що-таке-реактивне-програмування-reactive-programming-у-контексті-react)                                           |\n| 91  | [Як обробляти помилки під час використання хуків (hooks) у React?](#як-обробляти-помилки-під-час-використання-хуків-hooks-у-react)                                                               |\n| 92  | [Що таке «інкапсуляція стану» (state encapsulation) у React?](#що-таке-інкапсуляція-стану-state-encapsulation-у-react)                                                                           |\n| 93  | [Як реалізувати анімований перехід між компонентами в React Native?](#як-реалізувати-анімований-перехід-між-компонентами-в-react-native)                                                         |\n| 94  | [Що таке «стабільні ідентифікатори» (stable keys) і навіщо вони потрібні в React?](#що-таке-стабільні-ідентифікатори-stable-keys-і-навіщо-вони-потрібні-в-react)                                 |\n| 95  | [Як оновити стан компонента після зміни props?](#як-оновити-стан-компонента-після-зміни-props)                                                                                                   |\n| 96  | [Що таке «компоненти вищого порядку» (Higher-Order Components, HOC) у React?](#що-таке-компоненти-вищого-порядку-higher-order-components-hoc-у-react)                                            |\n| 97  | [Які є патерни для роботи з асинхронністю в React?](#які-є-патерни-для-роботи-з-асинхронністю-в-react)                                                                                           |\n| 98  | [Що таке «реактивний потік даних» (reactive data flow) у контексті React?](#що-таке-реактивний-потік-даних-reactive-data-flow-у-контексті-react)                                                 |\n| 99  | [Що таке Next.js, і різниця між Next.js і React?](#що-таке-nextjs-і-різниця-між-nextjs-і-react)                                                                                                  |\n\n### Що таке React?\n\n**React** - це бібліотека JavaScript, розроблена компанією Facebook, яка використовується для створення користувацьких інтерфейсів.\n\nВона дає змогу розбивати призначений для користувача інтерфейс на невеликі компоненти, які можуть оновлюватися незалежно один від одного, що забезпечує ефективне управління станом й оновленнями на веб-сторінці.\n\nReact використовує віртуальне DOM (Document Object Model) для оптимізації продуктивності, даючи змогу ефективно оновлювати тільки частини інтерфейсу, що змінилися.\n\nОднією з головних концепцій React є \"односпрямований потік даних\", що полегшує відстеження змін й управління станом програми. React широко використовується в розробці веб-додатків і мобільних додатків з використанням фреймворка React Native.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Які основні переваги використання React?\n\nВикористання React має кілька ключових переваг:\n\n1. **Віртуальний DOM:** React використовує віртуальний DOM для ефективного управління оновленнями інтерфейсу. Це дає змогу мінімізувати операції безпосередньо з реальним DOM, що підвищує продуктивність програми.\n\n2. **Компонентний підхід:** React дає змогу розбивати користувацький інтерфейс на безліч дрібних компонентів. Ці компоненти можуть бути повторно використані, що спрощує розробку, тестування та обслуговування коду.\n\n3. **Односпрямований потік даних:** React забезпечує односпрямований потік даних, що спрощує відстеження змін стану та робить код більш передбачуваним і легко підтримуваним.\n\n4. **Оголошувальний підхід:** React використовує оголошувальний стиль програмування, який дає змогу описувати, який вигляд має мати інтерфейс залежно від стану. Це робить код більш читабельним і зрозумілим.\n\n5. **Екосистема та співтовариство:** React має велику й активну спільноту розробників, що забезпечує безліч готових рішень, бібліотек та інструментів для розробки.\n\n6. **React Native:** Для розробки мобільних додатків можна використовувати React Native, який дає змогу використовувати React для створення нативних мобільних додатків під різні платформи.\n\n7. **Висока продуктивність:** Завдяки віртуальному DOM та оптимізаціям, React здатний забезпечувати хорошу продуктивність навіть під час роботи з великими та складними інтерфейсами.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Що таке JSX?\n\n**JSX** (JavaScript XML) - це розширення синтаксису JavaScript, що використовується в React для опису структури користувацького інтерфейсу.\n\nЦей синтаксис дає змогу об'єднувати код JavaScript і HTML-подібні елементи в одному місці, що робить створення компонентів React більш інтуїтивним і читабельним.\n\nJSX дає змогу вставляти JavaScript-вирази всередині тегів, укладаючи їх у фігурні дужки. Наприклад:\n\n```jsx\nconst name = \"Микола\";\nconst element = \u003ch1\u003eПривіт, {name}\u003c/h1\u003e;\n```\n\nУ цьому прикладі змінна name вставлена всередині JSX-елемента за допомогою фігурних дужок.\n\nJSX також дає змогу описувати користувацькі компоненти користувача у вигляді елементів, що робить код більш структурованим і зручним для читання:\n\n```jsx\nfunction Greeting(props) {\n  return \u003cp\u003eПривіт, {props.name}!\u003c/p\u003e;\n}\n```\n\nJSX-код потрібно перетворити на звичайний JavaScript-код перед тим, як він буде виконаний у браузері. Для цього використовуються інструменти компіляції, зазвичай включені в складальний процес проекту на React.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Які основні відмінності між компонентами класів і функціональними компонентами в React?\n\nУ React існують два основні способи створення компонентів: з використанням класів і з використанням функціональних компонентів. Ось основні відмінності між ними:\n\n#### Компоненти класів:\n\n1. **Синтаксис:** Компоненти класів визначаються як класи, що розширюють базовий клас React.Component.\n\n2. **Стан (state):** Компоненти класів мають вбудовану підтримку для стану (state), що дає їм змогу зберігати та керувати даними всередині компонента.\n\n3. **Методи життєвого циклу:** Компоненти класів мають широкий набір методів життєвого циклу (наприклад, componentDidMount, componentDidUpdate, componentWillUnmount), які дають змогу реагувати на різні етапи життя компонента.\n\n4. **Пропси (props):** Пропси передаються в компоненти класів через атрибути під час використання. Вони доступні через this.props всередині методів компонента.\n\n#### Функціональні компоненти:\n\n1. **Синтаксис:** Функціональні компоненти визначаються як звичайні функції.\n\n2. **Стан (state):** Спочатку функціональні компоненти не підтримували стан. Однак із появою хуків (hooks) у React (починаючи з React 16.8) функціональні компоненти тепер можуть використовувати стан та інші можливості, що раніше були доступні тільки компонентам класів.\n\n3. **Хуки (hooks):** Функціональні компоненти можуть використовувати хуки, як-от useState, useEffect та інші, для керування станом, ефектами та іншими аспектами.\n\n4. **Пропси (props):** Пропси також передаються функціональним компонентам, але доступні вони як аргументи функції.\n\nЗагалом, з появою хуків, функціональні компоненти стали кращим вибором для більшості випадків у React, оскільки вони забезпечують простіший синтаксис, який можна прочитати, а також спрощений спосіб керування станом та ефектами.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Що таке Virtual DOM, та як він працює?\n\nVirtual DOM (віртуальне DOM) - це концепція, яку використовують у бібліотеках і фреймворках, як-от React, для оптимізації оновлень реального DOM (Document Object Model) і підвищення продуктивності веб-додатків.\n\nРеальний DOM - це представлення структури веб-сторінки в браузері у вигляді дерева об'єктів. Коли стан програми змінюється та потрібне оновлення інтерфейсу, браузер виконує зміни безпосередньо в реальному DOM. Однак багаторазові та часті оновлення реального DOM можуть бути витратними з погляду продуктивності, особливо для великих і складних інтерфейсів.\n\nВіртуальний DOM розв'язує цю проблему таким чином:\n\n1. Створення віртуального DOM: Під час зміни стану застосунку React створює віртуальне представлення DOM-структури, яка є легковажною копією реального DOM.\n\n2. Порівняння віртуального DOM: React порівнює попередній стан віртуального DOM із новим станом, виявляючи, які частини інтерфейсу було змінено.\n\n3. Генерація різниці (патч): На основі порівняння React створює мінімальний набір змін, необхідних для оновлення віртуального DOM згідно з новим станом.\n\n4. Застосування змін: Створені зміни застосовуються до реального DOM тільки одним оновленням, що дає змогу уникнути множинних маніпуляцій із реальним DOM.\n\nВикористання віртуального DOM дає змогу значно поліпшити продуктивність, оскільки оновлення реального DOM відбуваються тільки в необхідних місцях. Це також робить розробку більш зручною та передбачуваною, оскільки розробнику не потрібно вручну керувати безліччю змін на реальному DOM.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Які методи життєвого циклу компонентів ви знаєте?\n\nУ React компоненти проходять через низку етапів свого \"життєвого циклу\", включно з такими методами:\n\n1. **constructor(props)**: Викликається під час створення компонента. Тут відбувається ініціалізація стану та прив'язка методів.\n\n2. **componentDidMount()**: Викликається після того, як компонент було вставлено в DOM. Часто використовується для завантаження даних із сервера.\n\n3. **componentDidUpdate(prevProps, prevState)**: Викликається після оновлення компонента. Дозволяє реагувати на зміни пропсів або стану.\n\n4. **shouldComponentUpdate(nextProps, nextState)**: Дозволяє оптимізувати оновлення компонента, повертаючи false, якщо оновлення не потрібне.\n\n5. **componentWillUnmount()**: Викликається перед видаленням компонента з DOM. Використовується для очищення ресурсів.\n\n6. **static getDerivedStateFromProps(props, state)**: Рідко використовується. Дозволяє оновити стан на основі нових пропсів.\n\n7. **getSnapshotBeforeUpdate(prevProps, prevState)**: Рідко використовується. Дозволяє отримати інформацію з DOM перед його оновленням.\n\n8. **componentDidCatch(error, info)**: Використовується для обробки помилок у дочірніх компонентах.\n\nЦе лише короткий огляд методів життєвого циклу компонентів у React.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Що таке \"стан\" (state) компонента в React?\n\n\"Стан\" (state) у React є об'єктом, який містить дані, що впливають на те, як компонент відображається та поводиться. Стан є одним із фундаментальних понять React і використовується для зберігання інформації, яка може змінюватися під час роботи програми.\n\nКоли стан компонента змінюється, React автоматично перерендерує компонент, щоб відобразити новий стан. Стан зазвичай ініціалізується в методі constructor() компонента, і для його оновлення використовується метод setState().\n\nПриклад:\n\n```jsx\nimport React, { Component } from \"react\";\n\nclass Counter extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: 0, // Початковий стан\n    };\n  }\n\n  increment = () =\u003e {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cp\u003eСчетчик: {this.state.count}\u003c/p\u003e\n        \u003cbutton onClick={this.increment}\u003eЗбільшити\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default Counter;\n```\n\nУ цьому прикладі компонент Counter має стан count, який оновлюється при кліці на кнопку. Під час виклику setState(), React оновить стан і перерендерить компонент, відображаючи нове значення count.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Як оновити стан компонента?\n\nУ React для оновлення стану компонента слід використовувати метод setState(). Цей метод приймає або об'єкт з оновленнями стану, або функцію, яка повертає об'єкт з оновленнями. Під час виклику setState(), React оновить стан компонента та перерендерує його, щоб відобразити новий стан.\n\nПриклад використання setState():\n\n```jsx\nimport React, { Component } from \"react\";\n\nclass Counter extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: 0,\n    };\n  }\n\n  increment = () =\u003e {\n    //  Оновлення стану з використанням об'єкта\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  decrement = () =\u003e {\n    // Оновлення стану з використанням функції\n    this.setState((prevState) =\u003e {\n      return { count: prevState.count - 1 };\n    });\n  };\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cp\u003eСчетчик: {this.state.count}\u003c/p\u003e\n        \u003cbutton onClick={this.increment}\u003eЗбільшити\u003c/button\u003e\n        \u003cbutton onClick={this.decrement}\u003eЗменшити\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default Counter;\n```\n\nУ цьому прикладі increment() і decrement() оновлюють стан count за допомогою setState(). Важливо використовувати функції під час оновлення стану, особливо якщо новий стан залежить від попереднього стану, щоб уникнути проблем з асинхронністю.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Що таке пропси (props) у React?\n\n\"Пропси\" (props) у React - це механізм передачі даних від батьківського компонента до дочірнього. Вони являють собою атрибути, які задаються при створенні компонента та не можуть бути змінені самим компонентом, який їх отримує. Пропси використовуються для передачі інформації про стан або конфігурацію компонента.\n\nПриклад використання пропсів:\n\n```jsx\nimport React from \"react\";\n\nfunction Welcome(props) {\n  return \u003ch1\u003eВітаю, {props.name}!\u003c/h1\u003e;\n}\n\nconst App = () =\u003e {\n  return \u003cWelcome name=\"Ірина\" /\u003e;\n};\n\nexport default App;\n```\n\nУ цьому прикладі компонент **Welcome** приймає пропс **name** і використовує його для виведення персоналізованого привітання. Компонент **App** передає значення \"Ірина\" в пропс **name** компонента **Welcome**.\n\nПропси передаються у вигляді об'єкта та доступні як властивості (**props**) всередині дочірнього компонента.\n\nВикористання пропсів дає змогу створювати більш гнучкі та перевикористовувані компоненти, адже можна налаштовувати їхню поведінку та відображення ззовні.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### У чому різниця між станом і пропсами в React?\n\nСтан (**state**) і пропси (**props**) - це два основні концепти в React, які використовуються для управління даними в компонентах. Вони мають різні цілі та характеристики:\n\n#### Стан (state):\n\n1. Стан - це внутрішні дані компонента, які можуть змінюватися під час виконання.\n2. Визначається та керується самим компонентом, у якому він знаходиться.\n3. Зміна стану викликає перерендеринг компонента, щоб відобразити новий стан.\n4. Доступно тільки для компонента, у якому було визначено стан.\n5. Оновлюється з використанням методу setState().\n\n#### Пропси (props):\n\n1. Пропси - це дані, що передаються від батьківського компонента до дочірнього компонента.\n2. Не можна змінити пропси всередині дочірнього компонента. Вони вважаються \"тільки для читання\".\n3. Пропси слугують для налаштування та передавання даних у компоненти.\n4. Використовуються для зв'язку між різними компонентами та передавання інформації вниз по ієрархії.\n5. Не спричиняють перерендерінг у разі їхньої зміни.\n\nКоротко кажучи, стан призначений для зберігання та управління даними, що змінюються всередині компонента, тоді як пропси призначені для передачі даних від батьківського компонента до дочірнього. Обидва ці концепти допомагають створювати динамічні та перевикористовувані інтерфейси в React додатках.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Як обробляти події в React?\n\nУ React обробка подій відбувається з використанням синтаксису, аналогічного обробці подій у нативному JavaScript, але з деякими відмінностями. Ось як обробляти події в React:\n\n1. **Створення методу обробки події:** Створіть метод усередині компонента, який буде виконуватися при виникненні події. Назва методу зазвичай починається з префікса \"handle\", за яким слідує ім'я події або описове ім'я.\n\n2. **Прив'язка методу до елемента:** Прив'яжіть створений метод до елемента, який генеруватиме подію. Це робиться за допомогою JSX, вказавши метод як значення атрибута події.\n\n3. **Використання аргументів:** Усередині методу обробки події ви можете отримати доступ до об'єкта події та використовувати його властивості, такі як `target`, щоб отримати інформацію про подію.\n\nПриклад обробки кліка:\n\n```jsx\nimport React, { Component } from \"react\";\n\nclass Button extends Component {\n  handleClick = () =\u003e {\n    console.log(\"Кнопка була натиснута\");\n  };\n\n  render() {\n    return \u003cbutton onClick={this.handleClick}\u003eНатисни на мене\u003c/button\u003e;\n  }\n}\n\nexport default Button;\n```\n\nУ цьому прикладі метод `handleClick` викликається при кліці на кнопку, виводячи повідомлення в консоль.\n\nВажливо зауважити, що під час передачі методу обробки події як атрибута JSX, не слід викликати його за допомогою круглих дужок (наприклад, не пишіть `onClick={this.handleClick()}`), адже це викличе виконання методу одразу під час рендерингу.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Що таке умовний рендеринг у React?\n\nУмовний рендеринг у React - це підхід, за якого вирішується, чи повинен компонент або його частина відображатися на основі будь-якої умови. Це дає змогу динамічно контролювати, які елементи інтерфейсу будуть показані або приховані залежно від стану застосунку або інших чинників.\n\nПриклад умовного рендерингу:\n\n```jsx\nimport React, { Component } from \"react\";\n\nclass Greeting extends Component {\n  render() {\n    const isLoggedIn = this.props.isLoggedIn;\n\n    if (isLoggedIn) {\n      return \u003ch1\u003eВітаємо вас на нашому сайті!\u003c/h1\u003e;\n    } else {\n      return \u003ch1\u003eБудь ласка, увійдіть до системи!\u003c/h1\u003e;\n    }\n  }\n}\n\nexport default Greeting;\n```\n\nУ цьому прикладі компонент Greeting залежно від значення пропса isLoggedIn рендерить різні заголовки. Якщо isLoggedIn дорівнює true, відображається привітання, в іншому разі - запрошення до входу в систему.\n\nУмовний рендеринг можна реалізувати також за допомогою тернарного оператора:\n\n```jsx\nclass Greeting extends Component {\n  render() {\n    const isLoggedIn = this.props.isLoggedIn;\n\n    return (\n      \u003cdiv\u003e\n        {isLoggedIn ? (\n          \u003ch1\u003eПривіт, Сергій!\u003c/h1\u003e\n        ) : (\n          \u003ch1\u003eБудь ласка, авторизуйтеся на сайті.\u003c/h1\u003e\n        )}\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\nУмовний рендеринг особливо корисний, коли потрібно адаптувати інтерфейс на основі динамічних даних або станів, таких як авторизація користувача, наявність даних та інші умови.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Як передати дані між компонентами вгору та вниз за ієрархією?\n\nУ React дані можуть передаватися між компонентами вгору та вниз по ієрархії з використанням пропсів (props) і колбеків (callback функцій). Ось як це працює:\n\n#### Передача даних вниз за ієрархією (від батька до дочірнього компонента):\n\nПропси (props): Батьківський компонент передає дані своєму дочірньому компоненту через пропси. Дочірній компонент може отримати доступ до цих даних як властивості (props).\n\nПриклад:\n\n```jsx\n// Батьківський компонент\nimport React from \"react\";\nimport ChildComponent from \"./ChildComponent\";\n\nconst ParentComponent = () =\u003e {\n  const data = \"Дані для дочірнього компонента\";\n\n  return \u003cChildComponent dataProp={data} /\u003e;\n};\n\n// Дочірній компонент\nimport React from \"react\";\n\nconst ChildComponent = (props) =\u003e {\n  return \u003cp\u003e{props.dataProp}\u003c/p\u003e;\n};\n\nexport default ChildComponent;\n```\n\n#### Передавання даних вгору за ієрархією (від дочірнього компонента до батька):\n\nКолбеки (callback функції): Батьківський компонент передає функцію як пропса дочірньому компоненту. Дочірній компонент може викликати цю функцію, передаючи їй дані назад вгору по ієрархії.\n\nПриклад:\n\n```jsx\n// Батьківський компонент\nimport React, { useState } from \"react\";\nimport ChildComponent from \"./ChildComponent\";\n\nconst ParentComponent = () =\u003e {\n  const [receivedData, setReceivedData] = useState(\"\");\n\n  const handleDataChange = (data) =\u003e {\n    setReceivedData(data);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eОтримані дані: {receivedData}\u003c/p\u003e\n      \u003cChildComponent onDataChange={handleDataChange} /\u003e\n    \u003c/div\u003e\n  );\n};\n\n// Дочірній компонент\nimport React from \"react\";\n\nconst ChildComponent = (props) =\u003e {\n  const sendDataToParent = () =\u003e {\n    props.onDataChange(\"Дані від дочірнього компонента\");\n  };\n\n  return \u003cbutton onClick={sendDataToParent}\u003eНадіслати дані\u003c/button\u003e;\n};\n\nexport default ChildComponent;\n```\n\nЦе дає змогу дочірньому компоненту впливати на дані та стан батьківського компонента.\n\nВикористовуючи цей підхід, ви можете ефективно передавати й оновлювати дані між компонентами вгору та вниз по ієрархії.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Як виконати HTTP-запити в React?\n\nДля виконання HTTP-запитів у React зазвичай використовують бібліотеки, такі як axios або вбудований fetch. Ось як виконати GET-запит з використанням бібліотеки axios:\n\n1. Встановіть бібліотеку axios за допомогою npm або yarn:\n\n```\nnpm install axios\n```\n\nабо\n\n```\nyarn add axios\n```\n\n2. У компоненті, де ви хочете виконати HTTP-запит:\n\n```jsx\nimport React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\n\nconst DataFetching = () =\u003e {\n  const [data, setData] = useState(null);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState(null);\n\n  useEffect(() =\u003e {\n    axios\n      .get(\"https://api.example.com/data\")\n      .then((response) =\u003e {\n        setData(response.data);\n        setIsLoading(false);\n      })\n      .catch((error) =\u003e {\n        setError(error.message);\n        setIsLoading(false);\n      });\n  }, []); // Порожній масив залежностей, щоб запит виконався тільки один раз\n\n  if (isLoading) {\n    return \u003cp\u003eЗавантаження...\u003c/p\u003e;\n  }\n\n  if (error) {\n    return \u003cp\u003eError: {error}\u003c/p\u003e;\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003ch2\u003eFetched Data\u003c/h2\u003e\n      \u003cpre\u003e{JSON.stringify(data, null, 2)}\u003c/pre\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default DataFetching;\n```\n\nУ цьому прикладі ми використовуємо хук useState для управління станом даних, завантаження та помилок. Хук useEffect використовується для виконання HTTP-запиту під час монтування компонента. Залежно від результату запиту, ми оновлюємо стан для відображення даних, завантаження або помилки.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Що таке контекст (context) у React і для чого він використовується?\n\nКонтекст (context) у React - це механізм, який дає змогу передавати дані глибоко вниз по ієрархії компонентів, минаючи пропси (props). Він використовується, коли певні дані потрібні в безлічі компонентів, і передача через кожен компонент стає незручною.\n\nКонтекст дає змогу створити «контекстне» оточення, в якому компоненти можуть отримувати доступ до даних без необхідності явно передавати їх через пропси. Це особливо корисно для глобальних даних, таких як дані автентифікації, теми оформлення та інші загальні стани.\n\nДля створення контексту використовуються два елементи: провайдер (Provider) і споживач (Consumer).\n\nПриклад використання контексту:\n\n```jsx\nimport React, { createContext, useContext } from \"react\";\n\n// Створюємо контекст\nconst UserContext = createContext();\n\n// Компонент, який постачає дані\nconst UserProvider = ({ children }) =\u003e {\n  const user = { name: \"Serhii\", role: \"developer\" };\n\n  return \u003cUserContext.Provider value={user}\u003e{children}\u003c/UserContext.Provider\u003e;\n};\n\n// Компонент, що використовує контекст\nconst UserInfo = () =\u003e {\n  const user = useContext(UserContext);\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eName: {user.name}\u003c/p\u003e\n      \u003cp\u003eRole: {user.role}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n\n// Головний компонент, який обертає додаток у провайдер даних\nconst App = () =\u003e {\n  return (\n    \u003cUserProvider\u003e\n      \u003cUserInfo /\u003e\n    \u003c/UserProvider\u003e\n  );\n};\n\nexport default App;\n```\n\nУ цьому прикладі контекст UserContext використовується для передачі інформації про користувача від UserProvider до UserInfo, минаючи пропси. Компонент UserInfo використовує хук useContext, щоб отримати доступ до даних контексту.\n\nКонтекст слід використовувати обережно та тільки там, де це справді необхідно, оскільки це може ускладнити розуміння взаємодії компонентів та ускладнити налагодження.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Як реалізувати PureComponent?\n\nЩоб створити **PureComponent** у React, ви можете використовувати класи або функціональні компоненти з хуками.\n\n1. З використанням класів:\n\n```jsx\nimport React, { PureComponent } from \"react\";\n\nclass MyPureComponent extends PureComponent {\n  render() {\n    return \u003cdiv\u003e{/* Код компоненту */}\u003c/div\u003e;\n  }\n}\n\nexport default MyPureComponent;\n```\n\n2. З використанням функціональних компонентів і хуків:\n\n```jsx\nimport React, { memo } from \"react\";\n\nconst MyPureComponent = () =\u003e {\n  return \u003cdiv\u003e{/* Код компоненту */}\u003c/div\u003e;\n};\n\nexport default memo(MyPureComponent);\n```\n\nОбидва варіанти **PureComponent** автоматично порівнюють пропси та стан, і перемальовують компонент тільки в разі змін даних. Це може істотно поліпшити продуктивність, уникаючи непотрібних перемальовок.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Що таке ключі (keys) у списках React-елементів і навіщо вони потрібні?\n\nУ React, ключі (keys) - це спеціальні атрибути, які використовуються під час рендерингу списків компонентів або елементів. Вони допомагають React оптимізувати процес оновлення та перемальовування компонентів у списках.\n\nКлючі призначаються кожному елементу в списку та мають бути унікальними серед своїх сусідніх елементів. Коли React оновлює список компонентів, він використовує ключі для визначення, які елементи були додані, видалені або змінені. Без ключів React буде перемальовувати та оновлювати всі елементи в списку, що може призвести до погіршення продуктивності.\n\nПриклад використання ключів:\n\n```jsx\nimport React from \"react\";\n\nconst TodoList = ({ data }) =\u003e {\n  return (\n    \u003cul\u003e\n      {data.map((todo) =\u003e (\n        \u003cli key={todo.id}\u003e{todo.text}\u003c/li\u003e\n      ))}\n    \u003c/ul\u003e\n  );\n};\n\nexport default TodoList;\n```\n\nУ цьому прикладі кожному елементу списку завдань (todo) присвоюється унікальний ключ (todo.id). Це дає змогу React ефективно оновлювати тільки змінені елементи, мінімізуючи кількість перемальовок.\n\nКлючі особливо важливі під час роботи зі списками, які можуть змінюватися в часі, наприклад, під час додавання, видалення або переупорядкування елементів.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Як використовувати стилі в React-компонентах?\n\nУ React для стилізації компонентів можна використовувати кілька підходів: вбудовані стилі (inline styles), стилі з використанням CSS-класів і бібліотеки стилів. Ось як це робиться:\n\n#### 1. Вбудовані стилі (Inline Styles):\n\nВбудовані стилі являють собою об'єкт JavaScript, де ключі - це назви CSS-властивостей, а значення - відповідні значення властивостей.\n\n```jsx\nimport React from \"react\";\n\nconst MyComponent = () =\u003e {\n  const styles = {\n    backgroundColor: \"blue\",\n    color: \"yellow\",\n    padding: \"12px\",\n    borderRadius: \"20px\",\n  };\n\n  return \u003cdiv style={styles}\u003eСтилізований компонент\u003c/div\u003e;\n};\n\nexport default MyComponent;\n```\n\n#### 2. Стилі з використанням CSS-класів:\n\nВи можете визначити CSS-класи в окремих файлах і додати їх до елементів у компонентах.\n\n```jsx\n// styles.css\n.myClass {\n  background-color: blue;\n  color: yellow;\n  padding: 12px;\n  border-radius: 20px;\n}\n\n// MyComponent.jsx\nimport React from 'react';\nimport './styles.css';\n\nconst MyComponent = () =\u003e {\n  return \u003cdiv className=\"myClass\"\u003eСтилізований компонент\u003c/div\u003e;\n};\n\nexport default MyComponent;\n```\n\n#### 3. Бібліотеки стилів:\n\nІснує безліч бібліотек для стилізації React-компонентів, таких як Styled Components, Emotion, CSS Modules та інші. Ці бібліотеки надають синтаксис для створення компонентів зі стилями всередині коду.\n\n```jsx\n// Styled Components\nimport React from \"react\";\nimport styled from \"styled-components\";\n\nconst StyledDiv = styled.div`\n  background-color: blue;\n  color: yellow;\n  padding: 12px;\n  border-radius: 20px;\n`;\n\nconst MyComponent = () =\u003e {\n  return \u003cStyledDiv\u003eСтилізований компонент\u003c/StyledDiv\u003e;\n};\n\nexport default MyComponent;\n```\n\nВибір методу залежить від уподобань та вимог проєкту. Важливо звернути увагу на підтримку класів, перевикористання стилів і простоту супроводу під час вибору підходу.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Що таке «керовані компоненти» (controlled components)?\n\n«Керовані компоненти» (controlled components) - це поняття, пов'язане з управлінням станом форм і введення даних у React. У керованих компонентах значення елемента введення (наприклад, текстового поля або чекбокса) контролюється станом React компонента, а не DOM елементом.\n\nКоли компонент контролює значення введення, він зберігає це значення у своєму стані й оновлює його за допомогою обробників подій (наприклад, у разі зміни тексту в полі введення). Це дає змогу мати повний контроль над даними форми та легко реагувати на зміни.\n\nПриклад керованого компонента з текстовим полем:\n\n```jsx\nimport React, { useState } from \"react\";\n\nconst ControlledComponent = () =\u003e {\n  const [inputValue, setInputValue] = useState(\"\");\n\n  const handleInputChange = (event) =\u003e {\n    setInputValue(event.target.value);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput type=\"text\" value={inputValue} onChange={handleInputChange} /\u003e\n      \u003cp\u003eВведене значення: {inputValue}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default ControlledComponent;\n```\n\nУ цьому прикладі значення текстового поля inputValue пов'язане зі станом компонента. Коли значення текстового поля змінюється, викликається обробник handleInputChange, який оновлює стан і, отже, значення текстового поля.\n\nВикористання керованих компонентів забезпечує передбачуваність стану, спрощує взаємодію з даними та дає змогу виконувати валідацію та інші операції над введеними даними перед їхнім надсиланням на сервер.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Що таке «некеровані компоненти» (uncontrolled components)?\n\n«Некеровані компоненти» (uncontrolled components) - це поняття, протилежне керованим компонентам, і воно відноситься до управління станом форм і введення даних у React. У разі некерованих компонентів, значення елемента введення (наприклад, input або textarea) зберігається безпосередньо в DOM, і React компонент не керує цим значенням.\n\nЗамість використання стану компонента для зберігання значення елемента введення, некеровані компоненти звертаються до DOM безпосередньо для отримання та оновлення значення.\n\nПриклад некерованого компонента з текстовим полем:\n\n```jsx\nimport React, { useRef } from \"react\";\n\nconst UncontrolledComponent = () =\u003e {\n  const inputRef = useRef(null);\n\n  const handleButtonClick = () =\u003e {\n    alert(\"Значення в полі введення: \" + inputRef.current.value);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput type=\"text\" ref={inputRef} /\u003e\n      \u003cbutton onClick={handleButtonClick}\u003eПоказати значення\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default UncontrolledComponent;\n```\n\nУ цьому прикладі значення текстового поля не зберігається в стані компонента. Натомість ми використовуємо useRef для отримання посилання на DOM-елемент і потім отримуємо його значення через inputRef.current.value.\n\nНекеровані компоненти можуть бути корисними, коли у вас є особливі випадки або вимоги, де контроль над станом через React не є оптимальним підходом. Однак, у більшості випадків, керовані компоненти забезпечують більш передбачуване та зручне управління даними у формах.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Що таке «підйом стану» (lifting state up)?\n\n«Підйом стану» (lifting state up) - це патерн у React, який передбачає переміщення стану з дочірніх компонентів до батьківських компонентів, щоб розділяти й керувати станом на вищому рівні та передавати його через пропси.\n\nЦей підхід особливо корисний, коли кілька компонентів повинні мати доступ до одного й того самого стану або коли стан повинен бути синхронізований між різними частинами програми.\n\nПриклад із підйомом стану:\n\n```jsx\nimport React, { useState } from \"react\";\n\nconst TemperatureInput = ({ scale, temperature, onTemperatureChange }) =\u003e {\n  return (\n    \u003cfieldset\u003e\n      \u003clegend\u003eВведіть температуру в градусах {scale}:\u003c/legend\u003e\n      \u003cinput\n        value={temperature}\n        onChange={(e) =\u003e onTemperatureChange(e.target.value)}\n      /\u003e\n    \u003c/fieldset\u003e\n  );\n};\n\nconst Calculator = () =\u003e {\n  const [celsius, setCelsius] = useState(\"\");\n  const [fahrenheit, setFahrenheit] = useState(\"\");\n\n  const handleCelsiusChange = (value) =\u003e {\n    setCelsius(value);\n    setFahrenheit((value * 9) / 5 + 32);\n  };\n\n  const handleFahrenheitChange = (value) =\u003e {\n    setFahrenheit(value);\n    setCelsius(((value - 32) * 5) / 9);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cTemperatureInput\n        scale=\"C\"\n        temperature={celsius}\n        onTemperatureChange={handleCelsiusChange}\n      /\u003e\n      \u003cTemperatureInput\n        scale=\"F\"\n        temperature={fahrenheit}\n        onTemperatureChange={handleFahrenheitChange}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Calculator;\n```\n\nУ цьому прикладі компонент Calculator піднімає стан температур із TemperatureInput компонентів. При зміні температури в одному з вводів, стан піднімається в батьківський компонент Calculator, який потім оновлює стан для іншого вводу, забезпечуючи синхронізацію температур в обох шкалах.\n\n«Підйом стану» допомагає спростити керування даними та їхню синхронізацію між компонентами, особливо під час роботи з компонентами на різних рівнях ієрархії.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Як створити форму в React?\n\nСтворення форми в React охоплює використання HTML-елементів форми в JSX та управління введенням даних за допомогою стану. Ось як це робиться:\n\n#### Створення компонента форми:\n\nСпочатку створіть компонент форми та визначте елементи форми всередині нього, такі як текстові поля, чекбокси, кнопки тощо.\n\n```jsx\nimport React, { useState } from \"react\";\n\nconst MyForm = () =\u003e {\n  const [formData, setFormData] = useState({\n    name: \"\",\n    email: \"\",\n    // інші поля форми\n  });\n\n  const handleInputChange = (event) =\u003e {\n    const { name, value } = event.target;\n    setFormData({\n      ...formData,\n      [name]: value,\n    });\n  };\n\n  const handleSubmit = (event) =\u003e {\n    event.preventDefault();\n    console.log(formData);\n    // відправляємо дані на сервер або виконуємо інші операції\n  };\n\n  return (\n    \u003cform onSubmit={handleSubmit}\u003e\n      \u003clabel\u003e\n        Ім\u0026apos;я:\n        \u003cinput\n          type=\"text\"\n          name=\"name\"\n          value={formData.name}\n          onChange={handleInputChange}\n        /\u003e\n      \u003c/label\u003e\n      \u003cbr /\u003e\n      \u003clabel\u003e\n        Email:\n        \u003cinput\n          type=\"email\"\n          name=\"email\"\n          value={formData.email}\n          onChange={handleInputChange}\n        /\u003e\n      \u003c/label\u003e\n      \u003cbr /\u003e\n      {/* Інші поля форми  */}\n      \u003cbutton type=\"submit\"\u003eОтправить\u003c/button\u003e\n    \u003c/form\u003e\n  );\n};\n\nexport default MyForm;\n```\n\n#### Управління станом:\n\nУ цьому прикладі використовується хук useState, щоб керувати станом даних форми. Обробник handleInputChange викликається при зміні полів введення та оновлює стан форми.\n\n#### Обробка надсилання:\n\nОбробник handleSubmit викликається під час надсилання форми. У цьому випадку ми запобігаємо стандартній поведінці надсилання форми на сервер за допомогою event.preventDefault(), щоб продемонструвати обробку даних на клієнті.\n\n#### Прив'язка значень до полів:\n\nЗначення полів форми пов'язані зі станом форми. value елементів введення встановлюється рівним значенням зі стану, а при зміні полів викликається обробник handleInputChange.\n\n#### Надсилання даних:\n\nПісля заповнення форми та натискання кнопки відправлення, дані можна використовувати для відправлення на сервер, виконання операцій або інших необхідних дій.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Як реалізувати умовне додавання класу до елемента в React?\n\nУ React ви можете умовно додати клас до елемента, використовуючи тернарний оператор або функцію для визначення класового імені. Ось приклади обох підходів:\n\n#### З використанням тернарного оператора:\n\n```jsx\nimport React from \"react\";\n\nconst MyComponent = ({ isActive }) =\u003e {\n  return (\n    \u003cdiv className={isActive ? \"active\" : \"inactive\"}\u003eВміст компонента\u003c/div\u003e\n  );\n};\n\nexport default MyComponent;\n```\n\nУ цьому прикладі клас active буде додано до елемента, якщо isActive дорівнює true, інакше буде додано клас inactive.\n\n#### З використанням функції для визначення класу:\n\n```jsx\nimport React from \"react\";\n\nconst MyComponent = ({ isActive }) =\u003e {\n  const getClassNames = () =\u003e {\n    return isActive ? \"active\" : \"inactive\";\n  };\n\n  return \u003cdiv className={getClassNames()}\u003eВміст компонента\u003c/div\u003e;\n};\n\nexport default MyComponent;\n```\n\nТут ми визначаємо функцію getClassNames, яка повертає клас залежно від значення isActive.\n\nЯкщо ви хочете додати кілька класів, ви можете використовувати об'єднання рядків або бібліотеки, такі як classnames.\n\n```jsx\nimport React from \"react\";\nimport classnames from \"classnames\";\n\nconst MyComponent = ({ isActive, isHighlighted }) =\u003e {\n  const classNames = classnames({\n    active: isActive,\n    highlighted: isHighlighted,\n  });\n\n  return \u003cdiv className={classNames}\u003eВміст компонента\u003c/div\u003e;\n};\n\nexport default MyComponent;\n```\n\nУ цьому прикладі classnames бібліотека дає змогу додати кілька класів на основі об'єкта, де ключі - це назви класів, а значення - умови, за яких клас буде додано.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Що таке фрагменти (fragments) у React?\n\nФрагменти (fragments) - це механізм у React, який дає змогу вам групувати дочірні елементи без необхідності створювати зайві DOM-елементи. Вони дають змогу повернути кілька елементів із компонента без обертання їх у додатковий DOM-контейнер.\n\nДо появи фрагментів, якщо ви хотіли повернути кілька елементів із компонента, вам доводилося обгортати їх у додатковий елемент (наприклад, \u003cdiv\u003e) або використовувати масив, що могло призвести до зайвого рівня вкладеності або проблем із CSS.\n\nЗ використанням фрагментів, це має чистіший та ефективніший вигляд:\n\n```jsx\nimport React from \"react\";\n\nconst MyComponent = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cdiv\u003eБлок 1\u003c/div\u003e\n      \u003cdiv\u003eБлок 2\u003c/div\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default MyComponent;\n```\n\nФрагменти можуть бути оголошені за допомогою порожніх \u003c\u003e і \u003c/\u003e, а всередині них ви можете розміщувати будь-яку кількість дочірніх елементів.\n\nФрагменти особливо корисні, коли вам потрібно повернути кілька елементів з компонента, наприклад, з умовних блоків або маппінгу масивів, і ви хочете уникнути створення додаткових контейнерів у DOM.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Яким чином можна оптимізувати продуктивність React-додатку?\n\nОптимізація продуктивності React-додатку - це важливий аспект, який може суттєво вплинути на користувацький досвід. Ось деякі способи оптимізації продуктивності:\n\n**1. Використовуйте керовані компоненти:**\n\nВикористовуйте керовані компоненти для контролю над даними у формах і введенні. Це дасть змогу мінімізувати непотрібні перемальовування та полегшить обробку введених даних.\n\n**2. Використовуйте ключі (keys) правильно:**\n\nПід час рендерингу списків компонентів переконайтеся, що в кожного елемента є унікальний ключ. Це дасть змогу React ефективно оновлювати тільки змінені елементи.\n\n**3. Ледаче завантаження (Code Splitting):**\n\nРозділіть ваш застосунок на невеликі фрагменти та використовуйте механізм ледачого завантаження для завантаження компонентів тільки тоді, коли вони дійсно потрібні.\n\n**4. Мемоїзація:**\n\nВикористовуйте хуки useMemo та useCallback для кешування обчислень та уникнення непотрібних перерахунків під час рендерингу.\n\n**5. Пакети компонентів (Component Libraries):**\n\nВикористовуйте готові пакети компонентів (наприклад, Material-UI, Ant Design), які оптимізовані та протестовані з урахуванням продуктивності.\n\n**6. Віртуалізація списків:**\n\nПід час роботи з великими списками даних використовуйте бібліотеки віртуалізації (наприклад, react-virtualized), щоб рендерити тільки видимі елементи списку.\n\n**7. Оптимізація рендерінгу:**\n\nУникайте непотрібних рендерів компонентів, використовуйте shouldComponentUpdate (у класових компонентах) або React.memo (у функціональних компонентах) для запобігання зайвим перемальовуванням.\n\n**8. Уникайте глибокої вкладеності:**\n\nПостарайтеся не створювати надто глибоку ієрархію компонентів, щоб зменшити час рендерингу та перерахунку.\n\n**9. Аналіз продуктивності:**\n\nВикористовуйте інструменти, як-от React DevTools та браузерні інструменти продуктивності, щоб аналізувати й оптимізувати продуктивність вашого застосунку.\n\n**10. Серверний рендеринг (Server-Side Rendering, SSR):**\n\nЯкщо це доречно для вашого застосунку, розгляньте можливість використання SSR для поліпшення початкового завантаження та SEO.\n\nЗверніть увагу, що оптимізація продуктивності залежить від конкретного контексту вашого застосунку. Рекомендується використовувати інструменти профілювання та вимірювати продуктивність після кожної оптимізації, щоб переконатися, що вона справді призводить до поліпшень.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Що таке HOC (Higher-Order Component) у React?\n\nВисокорівневий компонент (Higher-Order Component, HOC) - це патерн у React, який дає змогу повторно використовувати логіку компонентів, абстрагуючи її від самих компонентів. HOC не є частиною API React, це радше патерн композиції компонентів.\n\nHOC - це функція, яка приймає компонент і повертає новий компонент із додатковою логікою. HOC дають змогу винести загальні функціональні або структурні аспекти компонентів і повторно використовувати їх із різними компонентами.\n\nПриклад HOC:\n\n```jsx\nimport React from \"react\";\n\nconst withLogger = (WrappedComponent) =\u003e {\n  return class WithLogger extends React.Component {\n    componentDidMount() {\n      console.log(\"Рендерінг компонента\");\n    }\n\n    render() {\n      return \u003cWrappedComponent {...this.props} /\u003e;\n    }\n  };\n};\n\nconst MyComponent = () =\u003e {\n  return \u003cdiv\u003eВміст компонента\u003c/div\u003e;\n};\n\nconst EnhancedComponent = withLogger(MyComponent);\n\nexport default EnhancedComponent;\n```\n\nУ цьому прикладі withLogger - це HOC, який додає логування в метод componentDidMount. Потім компонент MyComponent обгортається HOC, створюючи EnhancedComponent.\n\nHOC дозволяє:\n\n- Розширювати функціональність компонентів без зміни самих компонентів.\n- Перевикористовувати код і логіку між різними компонентами.\n- Створювати загальні патерни для логування, аутентифікації, обробки помилок та інших аспектів.\n\nОднак, з розвитком React і появою хуків, частина функціональності HOC тепер може бути реалізована з використанням хуків, таких як useEffect, useContext та інших. У більшості випадків, використання хуків є кращим.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### В чем разница между HOC и компонентами с рендер-пропсами (render props)?\n\nЯк HOC (Високорівневий компонент, Higher-Order Component), так і компоненти з рендер-пропсами представляють патерни в React для повторного використання логіки між компонентами. Однак, у них є відмінності в тому, як їх реалізовано та як вони використовуються.\n\n#### HOC (Higher-Order Component):\n\n- HOC - це функція, яка приймає компонент і повертає новий компонент із додатковою логікою.\n- HOC можна використовувати як обгортку для компонентів, додаючи до них загальну функціональність.\n- HOC виконуються під час створення компонента, і логіка, додана HOC, застосовується під час кожного рендеринга.\n- У HOC є доступ до життєвих циклів компонента та його стану.\n- Приклад HOC - connect з бібліотеки Redux, який пов'язує компоненти зі сховищем стану.\n\n#### Компоненти з рендер-пропсами (Render Props Components):\n\n- Компонент із рендер-пропсами - це компонент, який приймає функцію як властивість і викликає цю функцію для рендерингу чого-небудь.\n- Компонент із рендер-пропсами дає змогу передавати логіку рендерингу безпосередньо в компонент, який використовує цей компонент із рендер-пропсами.\n- Логіка рендерингу передається через функцію-пропс і може бути використана за потреби.\n- Компонент з рендер-пропсами не має доступу до життєвих циклів батьківського компонента, але може мати доступ до стану через пропси.\n- Приклад компонента з рендер-пропсами - компоненти Mouse або Toggle в документації React.\n\nВибір між HOC і компонентами з рендер-пропсами залежить від конкретної ситуації та вподобань розробника. Обидва патерни дають змогу досягти повторного використання логіки, але з різними підходами.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Що таке рефи (refs) у React і як вони використовуються?\n\nRefs (скорочення від references) - це механізм у React, який дає змогу отримувати прямий доступ до DOM-елементів або компонентів, створених у React. Вони дають змогу вам звертатися до елементів, оновлювати їхні властивості та викликати методи компонентів без використання пропсів або стану.\n\nRefs корисні, коли вам потрібно взаємодіяти з DOM елементами безпосередньо або отримувати доступ до методів і властивостей компонентів, які не доступні через пропси.\n\n#### Створення рефів\n\nІснує два способи створення рефів:\n\n1. З використанням `React.createRef()` (class components):\n\n```jsx\nimport React, { Component } from \"react\";\n\nclass MyComponent extends Component {\n  constructor(props) {\n    super(props);\n    this.myRef = React.createRef();\n  }\n\n  render() {\n    return \u003cdiv ref={this.myRef}\u003eВміст компоненту\u003c/div\u003e;\n  }\n}\n```\n\n2. З використанням колбека (functional components):\n\n```jsx\nimport React, { useRef } from \"react\";\n\nconst MyComponent = () =\u003e {\n  const myRef = useRef();\n\n  return \u003cdiv ref={myRef}\u003eВміст компоненту\u003c/div\u003e;\n};\n```\n\n#### Використання рефів\n\nРефи можуть використовуватися для доступу до DOM-елементів або компонентів:\n\n```jsx\nclass MyComponent extends Component {\n  constructor(props) {\n    super(props);\n    this.myInputRef = React.createRef();\n  }\n\n  focusInput() {\n    this.myInputRef.current.focus(); // Фокус на input елементі\n  }\n\n  render() {\n    return \u003cinput ref={this.myInputRef} /\u003e;\n  }\n}\n```\n\n```jsx\nconst MyComponent = () =\u003e {\n  const myButtonRef = useRef();\n\n  const handleClick = () =\u003e {\n    myButtonRef.current.textContent = \"Кнопку натиснуто\";\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton ref={myButtonRef} onClick={handleClick}\u003e\n        Натисни мене\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n#### Які є нюанси?\n\n- Використовуйте рефи з обережністю, оскільки це може порушити концепцію управління станом у React.\n- У більшості випадків краще уникати використання рефів і віддавати перевагу роботі з даними через стан і пропси.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Як реалізувати анімацію в React-додатку?\n\nУ React анімації можуть бути реалізовані з використанням різних методів і бібліотек. Ось кілька способів, як це можна зробити:\n\n**1. CSS Анімації та Транзиції:**\nВи можете використовувати CSS для створення анімацій і транзицій. Додайте класи з анімацією або транзицією до елементів і змінюйте їхні стилі за допомогою JavaScript або стану компонентів.\n\n**2. React Transition Group:**\nЦе бібліотека, яка полегшує створення анімацій під час додавання, оновлення або видалення компонентів. Вона надає компоненти для управління анімаціями на рівні компонентів.\n\n**3. React Spring:**\nЦе потужна бібліотека для фізичних анімацій (пружинних анімацій). Вона надає хуки та компоненти для створення плавних анімацій.\n\n**4. CSS-in-JS бібліотеки:**\nБібліотеки, як-от styled-components і emotion, дають змогу створювати стилі та анімації безпосередньо в JavaScript. Вони надають механізми для створення анімацій на основі стану компонентів.\n\n**5. Бібліотеки для анімації SVG:**\nЯкщо ви працюєте з SVG, ви можете використовувати бібліотеки, як-от react-spring-svg, для анімування SVG елементів.\n\n**6. Бібліотеки для анімованих переходів:**\nЯкщо вам потрібні складні анімовані переходи між різними сторінками, ви можете використовувати бібліотеки, такі як react-router-transition, які надають механізми для анімації переходів між маршрутами.\n\nПриклад використання React Transition Group:\n\n```jsx\nimport React from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport \"./MyComponent.css\";\n\nconst MyComponent = ({ show }) =\u003e {\n  return (\n    \u003cCSSTransition in={show} timeout={400} classNames=\"fade\" unmountOnExit\u003e\n      \u003cdiv className=\"my-component\"\u003eВміст компонента\u003c/div\u003e\n    \u003c/CSSTransition\u003e\n  );\n};\n\nexport default MyComponent;\n```\n\nУ цьому прикладі, коли show дорівнює true, компонент буде анімований під час появи та зникнення за допомогою CSS класів і транзицій.\n\nЗверніть увагу: При створенні анімацій, особливо складних, слід враховувати продуктивність і подбати про те, щоб анімації не сповільнювали роботу вашої програми.\n\n[⬆ Повернутися до списку](#список-запитань)\n\n### Як працює механізм \"контексту\" (context) для передачі даних?\n\nМеханізм \"контексту\" (context) в React дає змогу передавати дані глибоко вниз по дереву компонентів без явної передачі через пропси на кожному рівні. Це особливо корисно, коли кілька компонен�","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgetfrontend%2Freact-100-questions-ua","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgetfrontend%2Freact-100-questions-ua","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgetfrontend%2Freact-100-questions-ua/lists"}