Як обробити складний state в React?

Дана проблема часто виникає в розробці програм, тому на співбесіді з легкістю можуть запитати щось подібне, щоб побачити хід ваших думок.

Інколи стан компоненти в React може бути досить складним. В таких випадках часто породжуються різні функції для роботи з цим станом і стає важко за всім прослідкувати. А ще, якщо потрібно передавати всі ці дані компонентам вниз, настає повний жах. Хочеться мати все в одному місці.

Для вирішення даної проблеми можна використати useReducer. Це альтернатива до useState, яка допомагає в роботі з складними станами.

useReducer приймає на вхід функцію reducer, початкові дані та функцію ініціалізації (опціонально). Найважливіша частина тут - reducer. Це функція з типом (state, action) => newState. Ті, хто знайомий з redux, мабуть помітили спільне. state - попередній стан, action - це обʼєкт, який описує, що потрібно змінити.

А повертає цей хук масив з двох значень - власне сам стан, та dispatch функцію, в яку і будете передавати вищезгаданий action.

На перший погляд може бути трохи складно, тому додаємо вам посилання на українську версію документації, щоб краще розібратись як працює useReducer. А також прикріпляємо статтю, де дана тема описана на реальному прикладі.

👉 Читати документацію
👉 Читати статтю

#interview

#todo написати функцію на будь-якій мові програмування, яка на вхід отримує дві стрічки та повертає boolean, який вказує, чи є ці стрічки анаграмами. Анаграма - переставлення літер у слові, в результаті чого утворюється нове слово.

Наприклад, "літо" та "тіло" - вхідні два слова мають однаковий набір літер та їх кількість.

🚀 dnd kit

Пам'ятаєте, ми кидали відео, де описано, які бібліотеки краще використати для розробки drag and drop, а які вже застарілі?

Минулого тижня мені якраз випала нагода додати drag and drop функціонал. Тому я ще раз переглянула відео, обрала для себе dnd kit і не пожалкувала! Класна документація, багато прикладів, легкий у використанні. Тому сміло можу його рекомендувати!

Я задоволена, замовник задоволений - всі щасливі! ⤵️

* In addition, your landing pages and drag-and-drop designs are exceptional. You should be proud of the work you have produced!

👉 Відкрити документацію

Зберігайте та користуйтесь 💛

#library

Good Morning, guys! ✨

Let's practice our English! So...

👉 Please tell us how you imagine your perfect working day.

Як завжди, можете писати свої відповіді тут або в чаті.

Have a wonderful Friday! 💛

#english_friday

yargs + inquirer

Якщо ви пишете консольний застосунок, то рано чи пізно потрібно буде додавати аргументи від користувача. І тут я бачу два шляхи: прописувати їх відразу при запуску команди або запитувати аргументи в користувача походу роботи програми.

Почнемо з першого. Звісно, ви і без бібліотек зможете все прочитати, розпарсити і обробити. Але я все ж таки поділюсь з вами бібліотекою, якою сам неодноразово користувався.

Yargs - бібліотека node.js, яка допомагає вам розпарсити аргументи з командного рядка та згенерувати хороший інтерфейс користувача.

👉 Відкрити документацію

А якщо ви хочете додати більше інтерактиву по ходу виконання - зверніть увагу на inquirer. З цією бібліотекою ви з легкістю зможете ставити питання користувачу прямо в командному рядку, парсити та перевіряти відповіді. Тут є різні типи запитань: стандартне, числове, пароль, вибір зі списку тощо.

👉 Відкрити документацію

#library

#todo опишіть будь-який патерн проектування і його практичне застосування 😎

Інколи нам потрібно виводити список в стрічку і всі ми знаємо про метод .join. Але радимо спробувати зробити трішки елегантніший вивід, використовуючи вбудовані функції JavaScript.

Ділимось з вами коротким ютуб-тіктоком, в якому зможете побачити як це зробити 💛

👉 Дивитись відео

#tips

🚀 Top 100+ Angular Interview Questions and Answers 2023

Нещодавно ми ділились шпаргалкою на співбесіду про React, а сьогодні знайшли для вас про Angular!

Дана стаття має чудову підбірку питань/відповідей про Angular, які допоможуть успішно пройти інтерв’ю.

👉 Читати статтю

Зберігайте та користуйтесь 💛

#interview

#todo написати функцію на будь-якій мові програмування, яка виконує транспонування матриці.

Приклад транспонування:
[[1, 2, 3], [[1, 4, 7],
[4, 5, 6], => [2, 5, 8],
[7, 8, 9]] [3, 6, 9]]

🚀 Noty.ai

Один з наших близьких друзів зараз активно штурмує британський ІТ ринок. АЛЕ коли він заходить до них на дзвінки, він абсолютно нічого не розуміє. На жаль, якщо ви добре знаєте американську англійську, це не означає, що ви зрозумієте британську.

💡 Він знайшов рішення!

Noty.ai автоматично створює субтитри в режимі реального часу під час дзвінків за допомогою Google Meet і Zoom. Але це ще не все! Він зберігає всі ваші нотатки, статистику та підсумки.

Якщо для вас ця проблема знайома (і не лише з британською ангійською, а взагалі), можете сміло використовувати Noty.ai.

👉 Відкрити посилання

#tips

Welcome 👋

Let's practice our English! So...

👉 Which technology would you choose if you were forced to replace your current one and why?

Як завжди, можете писати свої відповіді тут або в чаті.

Have a nice Friday! 💛

#english_friday

APIs for your project

Всі ми мали справу з пет-проектами. Однією з основних цілей їх створення є навчання, спроба побудувати щось цікаве та живе.

Хочемо поділитися з вами статтею з списком відкритих API, з яких ви можете почерпнути трохи натхнення та знайти ідею для власного проекту.

👉 Читати статтю

#article

#todo розшифрувати закодований текст - Ckfdf Erhf]ys!

Zod 💎

Щодня більше і більше розробників використовують в своїх проектах TypeScript. Він сильно покращує developer experience. І, хоч основною задачею TypeScript є саме додавання типів в JavaScript, всі ми знаємо, що він виконує перевірки тільки при розробці, а в вже в процесі роботи ми ніяк не захищені.

Ділимося з вами бібліотекою zod, яка дозволяє описувати тип та виконувати перевірки вже в процесі роботи вашого застосунку. Бібліотека дуже добре працює з TypeScript та має широкий функціонал.

Також ділимось з вами короткими відео-туторіалами, щоб ви могли швидко ознайомитись і зрозуміти як це все працює.

Читати документацію
Дивитись відео

#library

🚀 400+ JavaScript Interview Questions and Answers

Знайшли для вас круту шпаргалку про JavaScript, яка має понад 400 найрізноманітніших питань та відповідей на них! З нею вам вже ніяка співбесіда не страшна!

А ще, вкінці ви знайдете цікаві тести, які допоможуть вам перевірити ваші знання!

👉 Читати статтю

#interview