💡 Вопросы по React для собеседования

Нашли подборку из 50 вопросов, которые могут встретиться на интервью. Там же — ответы, так что сохраняйте, чтобы не потерять

О чем могут спросить

📌 JSX и рендеринг компонентов – зачем нужен JSX, как работает React.createElement.

📌 Props и state – разница, передача данных, обновление состояния.

📌 Жизненный цикл компонентов – какие методы вызываются при рендеринге.

📌 Hooks – useState, useEffect, useMemo и их применение.

📌 Контекст и управление состоянием – Context API, Redux, MobX.

📌 Виртуальный DOM – как React оптимизирует обновления.

📌 Асинхронные операции – работа с useEffect, Promises и fetch.

➡️ Вопросы и ответы к ним в статье

⏱ CSS-советы, которые сэкономят вам время

Следующие фишки полезны как для начинающих, так и для опытных разработчиков, ведь даже небольшие изменения могут значительно улучшить ваш рабочий процесс.

1️⃣ Используйте CSS-переменные

:root {
  --primary-color: #3498db;
  --padding: 10px;
}

button {
  background-color: var(--primary-color);
  padding: var(--padding);
}

2️⃣ Адаптивная типографика с clamp()

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

3️⃣ Используйте :not()

button:not(.disabled) {
  background-color: green;
  cursor: pointer;
}

4️⃣ Оптимизируйте производительность с will-change

.card {
  will-change: transform, opacity;
}

5️⃣ Используйте calc() для гибких размеров

.container {
  width: calc(100% - 50px);
}

➡️ Больше советов в статье

🔥 Как работает Redux и когда его использовать

Redux — это предсказуемое хранилище состояния для JavaScript-приложений. Оно помогает управлять состоянием в больших проектах, делая данные централизованными, удобными для отладки и масштабируемыми.

📌 Как работает Redux

Основная идея Redux — единое хранилище, из которого можно получать и изменять данные. Все обновления состояния происходят предсказуемо через Actions и Reducers.

1️⃣ Store — централизованное место, где хранятся все данные приложения.

2️⃣ Actions — описывают, что должно измениться (например, "Добавить товар в корзину").

3️⃣ Reducers — чистые функции, которые принимают текущее состояние и действие, возвращая обновленное состояние.

4️⃣ Dispatch — отправляет actions в store, вызывая соответствующие редьюсеры.

Пример простой схемы:
Компонент → Dispatch(Action) → Reducer → Store обновляется → UI обновляется

📌 Когда использовать Redux

• Состояние сложно управляется через props/state.

• Данные нужно шарить между множеством компонентов.

• Важно предсказуемое поведение и отладка

• Требуется глобальный кеш данных, например, для API-запросов.

Eсли состояние локальное и несложное, Context API или Zustand могут быть более простыми альтернативами.

➡️ Подробнее про Redux

🎙 460-й выпуск подкаста «Веб-стандарты»

Кого слушаем: Андрей Мелихов, Алексей Симоненко, Никита Дубко.

⏱️ Таймкоды:
00:01:23 Create React App точно всё
00:18:54 Системные шрифты
00:33:30 Правильный сервер на Node.js
00:49:13 Как сжать весь npm
01:06:31 Вы не поняли Electron

▶️ Сайт подкаста

#подкасты #новости

🔥 Standard Schema: общий интерфейс для библиотек схем/валидации

Создатели Zod, Valibot и ArkType представили фантастический пример сотрудничества по определению общего интерфейса для использования библиотек схем JavaScript и TypeScript.

➡️ standardschema.dev — шаг к лучшей совместимости в TypeScript

👩‍💻 Документальный фильм про Angular от Honeypot

Док от создателей фантастических фильмов про Node.js и Ruby on Rails представляет собой свежую историю о взлётах и падениях популярного фреймворка Angular (ранее известного как AngularJS) с участием настоящих звёзд JavaScript.

🍿 Смотреть полностью

#новости

Git Cherry-pick 🆚 Merge 🆚 Rebase

Наглядная шпаргалка для разработчика.

👩‍💻 Источник

🧑‍💻 Как создать фавикон в 2025 году: три файла, которые подойдут большинству потребностей

Андрей Ситник просит «остановить безумие генераторов иконок» и применить более разумный подход, приняв минимальный набор иконок, который соответствует большинству современных потребностей.

➡️ Читать гайд

🧑‍💻 Vite с TypeScript

Если вы создали проект React на основе JavaScript с помощью Vite и хотите перейти на TypeScript, в мини-гайде описаны основные шаги:

1️⃣ Установка TypeScript и зависимостей.
2️⃣ Создание файлов конфигурации TypeScript.
3️⃣ Переименование файлов и модификация index.html.
4️⃣ Настройка ESLint для TypeScript.

📈 Plotly — JavaScript-библиотека для построения графиков

Высокоуровневая декларативная библиотека для построения графиков, созданная на основе D3 и stack.gl, с более чем 40 типами графиков, включая 3D-графики, статистические графики и SVG-карты.

Библиотека активно поддерживается. В представленной недавно версии 3.0.0 устранены устаревшие функции, исправлены ошибки и выполнен переход на esbuild.

💻 GitHub

👨‍💻 Создание слайдера с наклонным содержимым и эффектом наведения: гайд для фронтенд-разработчика

Автор использует возможности HTML и CSS (+ немного Sass для упрощения), включая grid, clip-path, :has(), вложенность и другие интересные элементы CSS, чтобы всё это работало вместе.

👉 Читать

💡 Простой способ создания нового контекста наложения в CSS

Шпаргалка для фронтенд-разработчика.

#css #tip by Shripal Soni

🎙 461-й выпуск подкаста «Веб-стандарты»

Кого слушаем: Полина Гуртовая, Алексей Симоненко, Андрей Мелихов.

⏱️ Таймкоды:
00:00:59 Chrome 133
00:23:43 Firefox 135
00:30:44 Deno против Oracle
00:39:13 Медленный URLPattern
00:51:48 GitHub Copilot
01:06:14 Дырка в Vitest
01:13:47 Ответы на вопросы

▶️ Сайт подкаста

#подкасты #новости

🌐 Сколько памяти ест ваша вкладка

При разработке веб-приложений не все задумываются о том, сколько памяти потребляет их код. О производительности наших сайтов мы вспоминаем гораздо чаще. К тому же, не каждому разработчику интересно «экономить на спичках». Разве может наш код на языке JavaScript требовать много памяти? «Много» — это вообще сколько? 100 мегабайт — это много?

Антон Непша, фронтенд-разработчик из Сбера, посвятил этой теме доклад на HolyJS и рассказал о том, сколько ресурсов потребляют сайты, как эти ресурсы распределяются, где хранятся, и как связать информацию о них из снимка памяти с конкретным местом в своём коде.

👉 Читать текстовую версию доклада

🤔 Какой WYSIWYG-редактор выбрать в 2025 году?

Аббревиатура WYSIWYG расшифровывается как What You See Is What You Get. Речь идет о типе редакторов, отображающих создаваемый контент в том виде, в котором он по итогу будет размещен на странице или в приложении, без необходимости делать дополнительные преобразования и обработку данных.

Под катом — обзор нескольких популярных редакторов: Tiptap, BlockNote, Lexical, Slate, ProseMirror, Quill, Plate, Remirror, Editor.js, CKEditor, TinyMCE.

👉 Читать

🖼️ Миграция на строгий TypeScript: путь и собственное решение команды Selectel

Сейчас TypeScript практически вытеснил весь остальной код в проекте, но миграция заняла много времени. И чтобы была возможность переиспользовать уже написанный код в TS-модулях, было принято решение отказаться от строгих проверок.

Из-за выключенных проверок в коде накопилось большое количество использований any, а также отсутствующих проверок на null. Это две основные проблемы, которые не позволяют единовременно пройтись по всей кодовой базе и за раз исправить все ошибки, возникающие при включении строгих проверок.

Если вам знакома эта проблема, то статья для вас. Максим Овчарик, ведущий фронтенд-разработчик в Selectel, делится опытом миграции кода на строгий режим TypeScript.

👉 Читать