🚀 Top 50+ React Interview Questions and Answers 2024

У цій статті було розглянуто питання на співбесіді з React, які охоплюють все, від базових до просунутих концепцій React, таких як Virtual DOM, компоненти, стан та пропси, JSX, хуки, маршрутизація та багато іншого. Незалежно від того, чи ви новачок, чи досвідчений розробник, дана стаття може стати вам в нагоді.

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

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

#interview

#quiz
#post_from @MatiGreen

#todo розповісти про останню бібліотеку, яку ви додали до свого проекту або розбирались з нею 👀

React Email 3.0 📧

Ми вже розказували вам про цю бібліотеку раніше, але нещодавно на світ зʼявився реліз версії 3.

Кажуть, що відбувся великий приріст в продуктивності, підтримка компонент з React 19 та зовсім нові компоненти. Щодо останнього - це не все зовсім так, адже компоненти не було додано в саму бібліотеку, а лише на сайті, де ви просто можете CTRL+C CTRL+V код у свій проєкт. Підхід насправді непоганий, що вже довела бібліотека компонент snadcn/ui.

Також тут вже багато готових прикладів, на основі реальних емейлів від різних сервісів, наприклад, списання грошей від Apple.

До речі, автор React Email також засновник Resend - платформи для відправки емейлів, та автор Dracula theme - доволі популярної теми серед розробників.

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

#news

Welcome!

Let's practice our English! So...

👉 If you could swap lives with someone for a week, who would it be and what would you do?

Have a nice #english_friday 💛

Prettify TypeScript: Better Type Previews 🤩

Коли працюєте з TypeScript і хочете підглянути, що ж за властивості є в певному типі, часто там можна побачити просто type AB = A & B, і треба копати далі, щоб просто дізнатись про існування кількох полів.

Проте існує дуже просте вирішення такої проблеми, про яке ви можете дізнатись з відео нижче!

👉 Дивитись відео
👉 Відкрити посилання на розширення

#shorts

Framer Motion 🖼️

Щось ця бібліотека для React останнім часом часто зʼявляється у різних блогах чи рекомендаціях. З її допомогою можна легко реалізувати роботу анімації чи обробку жестів з гарною продуктивністю.

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

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

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

#library

"use server" ⚙️

React постійно змінюється, серверні компоненти працюють по новому, тому всім необхідно встигати за оновленнями.

У відео нижче автор розповідає як вони працюють та які небезпеки можуть на вас чекати.

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

#interview

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

Наприклад:
silent, listen => true

Biome 📐

Не одними Prettier та ESlint.

Biome - це швидкий форматувальник та статичний аналізатор коду. Тобто він один може замінити і Prettier, і ESLint. Зʼявився він як fork від Rome, іншого схожого інструменту.

Зараз Biome підтримує приблизно 97% того, що робить Prettier і майже 270 правил з ESLint.

Ми самі подумуємо над переходом, а то щось надто довго проганяються усі перевірки на поточних інструментах. А що думаєте ви?

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

#tips

Welcome!

Let's practice our English! So...

👉 What’s the strangest thing you’ve ever eaten?

Have a nice #english_friday 💛

#how_to оголосити тип глобальної змінної в TypeScript

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

Tailwind Variants 🧣
#post_from @vova_taras

Tailwind Variants - бібліотека, яка з допомогою Tailwind класів дозволяє будувати API для різних варіацій стилів. Вона має різний функціонал, як, наприклад, розширення стилів чи розділення їх на слоти.

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

#library

Віртуалізація списків 📋

Іноді трапляються ситуації, коли потрібно відрендерити великі списки даних (дуууже великі). І виявляється рендеринг тисяч елементів одночасно може серйозно вплинути на продуктивність вашого застосунку.

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

Як це працює?

Потрібно розрахувати видиму область, визначити, скільки елементів поміщається у вікні. Також потрібно відслідковувати скрол, щоб визначити, які саме елементи повинні бути видимими.

Використання віртуалізації значно покращує продуктивність та досвід користувача при роботі з довгими списками.

#interview