Frontend | Вопросы собесов

🤔 Основные причины отказа от классовых компонентов в react? С появлением React Hooks в версии 16.8 (2019 год) классовые компоненты стали устаревшим способом создания компонентов. Сегодня функциональные компоненты с хуками заменяют классы. Давайте разберем почему. 🟠Меньше кода → чище и понятнее Функциональные компоненты короче, читаются легче, а код становится чище.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <button onClick={this.increment}>
        Счетчик: {this.state.count}
      </button>
    );
  }
}

Функциональный компонент (хуки делают код проще)

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Счетчик: {count}
    </button>
  );
}

🟠Легче управлять жизненным циклом (useEffect vs componentDidMount) В классах жизненный цикл* компонента состоит из нескольких методов (componentDidMount, componentDidUpdate, componentWillUnmount).

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { time: 0 };
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ time: this.state.time + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return <p>Время: {this.state.time} секунд</p>;
  }
}

Функциональный компонент (хуки делают все проще)

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => setTime(t => t + 1), 1000);
    return () => clearInterval(timer);
  }, []);

  return <p>Время: {time} секунд</p>;
}

🟠Лучшая производительность (меньше потребления памяти) Классовые компоненты используют экземпляры классов, а функциональные компоненты – просто функции. Создают экземпляры this Обрабатывают setState Хранят лишние связи и контексты Не создают this Используют только нужные данные Оптимизируются через React.memo

const Button = React.memo(({ onClick }) => {
  console.log("Ререндер кнопки");
  return <button onClick={onClick}>Нажми</button>;
});

function App() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount(c => c + 1), []);

  return (
    <div>
      <p>Счетчик: {count}</p>
      <Button onClick={increment} />
    </div>
  );
}

🟠Легче переиспользовать логику (React Hooks vs HOC/Render Props) Раньше в классах код переиспользовали через HOC и Render Props, но это делало код сложным.

function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log("Компонент монтирован");
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

Хуки (useEffect) делают код чище

function useLogger() {
  useEffect(() => console.log("Компонент монтирован"), []);
}

function MyComponent() {
  useLogger();
  return <p>Привет, мир!</p>;
}

🟠Функциональные компоненты – будущее React React официально рекомендует использовать функциональные компоненты Dan Abramov (разработчик React) Новые фичи React (Suspense, Server Components) создаются для функциональных компонентов Классы не работают в React Server Components Большинство современных библиотек (Redux Toolkit, React Query) рассчитаны на хуки Ставь 👍 и забирай 📚 Базу знаний

ИИ + Тайм-менеджмент = Будущее продуктивности Хотите знать, как ИИ может оптимизировать работу вашей команды? В Таймлист ИИ мы делимся: ⚡ Свежими новостями из мира ИИ для бизнеса ⚡ Лайфхаками по тайм-менеджменту для команд 💻 Обновлениями и фичами Таймлист ИИ Управляйте временем с ИИ и увеличивайте эффективность! Подписаться #реклама 16+ tgryx.ru О рекламодателе

🤔 Для кого необходима семантическая верстка? - Для поисковых систем (SEO); - Для помощников с ограниченными возможностями (screen reader); - Для разработчиков и поддержки кода — читаемость и логика; - Для браузеров и парсеров — правильная обработка контента. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Новый кроссовер премиум-класса HONGQI HS5 от 3 990 000 ₽ Новый полноприводный кроссовер с просторным и комфортным салоном выгодно впечатляет! Записывайтесь на тест-драйв, чтобы почувствовать премиальный комфорт и мощь без компромиссов. Узнать больше #реклама hongqi.ru О рекламодателе

🤔 Почему методы жизненного цикла нельзя писать через прилоченную функцию? В Vue 2 и Vue 3 (Options API) методы жизненного цикла (mounted, created, beforeDestroy и др.) должны быть обычными функциями, а не стрелочными (() => {}). 🟠Как работает `this` в Vue? Когда Vue вызывает метод жизненного цикла, он автоматически привязывает this к экземпляру компонента.

export default {
  data() {
    return { message: "Привет!" };
  },
  mounted() {
    console.log(this.message); // ✅ Работает, this = { message: "Привет!" }
  }
};

🟠Почему стрелочная функция не работает? Стрелочные функции не создают свой собственный this, а берут this из внешнего контекста (того, что было при их создании).

export default {
  data() {
    return { message: "Привет!" };
  },
  mounted: () => {
    console.log(this.message); // ❌ Ошибка: this === undefined
  }
};

🟠Как стрелочные функции всё-таки можно использовать? Хотя стрелочные функции нельзя использовать для методов жизненного цикла, их можно применять внутри обычных методов:

export default {
  data() {
    return { message: "Привет!" };
  },
  mounted() {
    setTimeout(() => {
      console.log(this.message); // ✅ Работает, this берётся из `mounted()`
    }, 1000);
  }
};

Ставь 👍 и забирай 📚 Базу знаний

Присоединяйся к хакатону года в сфере travel-tech - О!Хакатону от Островка 💚 Островок приглашает Go и Python разработчиков, а также аналитиков и продакт-менеджеров попробовать свои силы в реальных бизнес-задачах и побороться за денежный приз. Мероприятие пройдет полностью в онлайн-формате, участвовать можно из любой точки мира, самостоятельно или в команде. Призовой фонд: 1 000 000 ₽ Регистрация открыта до 18 сентября. Стартуем 26 сентября! 🚀 Подробности и регистрация Реклама. ООО "БРОНИРОВАНИЕ ГОСТИНИЦ". ИНН 7703389880.

🤔 Какие способы изоляции стилей ты знаешь? Изоляция стилей может быть достигнута с помощью CSS-модулей, которые создают уникальные имена классов для предотвращения конфликта стилей. Shadow DOM изолирует стили внутри веб-компонентов, не позволяя им влиять на внешний код. Также можно использовать атрибуты, такие как scoped для стилей внутри Vue.js или инкапсуляцию стилей с помощью @import и :host в веб-компонентах. Все эти способы помогают избежать пересечения стилей и гарантируют их изоляцию. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое семантические коммиты? Семантические коммиты – это соглашение о формате сообщений коммитов в системе контроля версий (обычно Git), которое помогает делать историю изменений более понятной и удобной для автоматического анализа. Обычно используется стандарт Conventional Commits, который вводит строгую структуру сообщений коммитов. 🚩Формат семантического коммита Коммит должен начинаться с типа изменения, а затем кратко описывать суть правки. Основной шаблон

<тип>(<область>): <краткое описание>

🚩Основные типы коммитов 🟠feat добавление новой функциональности 🟠fix исправление ошибки 🟠docs изменение документации 🟠style исправления, не влияющие на логику (например, форматирование) 🟠refactor переработка кода без изменения функциональности 🟠test добавление или обновление тестов 🟠chore изменения, не влияющие на код (например, обновление зависимостей) 🚩Примеры 1⃣Добавление новой функции

feat(auth): добавлена аутентификация через Google

2⃣Исправление ошибки

fix(login): исправлен баг с неверным редиректом

3⃣Улучшение кода без изменения

refactor(api): оптимизирован алгоритм фильтрации данных

4⃣Обновление документации

docs(readme): добавлены инструкции по развертыванию

Ставь 👍 и забирай 📚 Базу знаний

ЖК «Мечта». Готовые дома для всей семьи от 10 000 ₽/мес Полноценная жизнь за городом в окружении леса и трех озер с собственными пляжами. ✅ Современные школы и детские сады ✅ Чистый воздух, реликтовые озёра ✅ 17 мин. езды до МЦД Лобня ✅4 квартала в продаже: выгодная ипотека, беспроцентная рассрочка, ключи сразу! Узнать больше Изучите все условия кредита (займа) на сайте в соответствующем разделе. Оценивайте свои финансовые возможности и риски. Финансовые услуги оказывает: ПАО "Банк ВТБ". #реклама mrqz.me О рекламодателе

🤔 Что такое блочная модель? Блочная модель (Box model) описывает, как браузер отображает и рассчитывает размеры элементов: - content → padding → border → margin. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое git-flow? Это рабочая модель ветвления, предложенная Винсентом Дриссеном в 2010 году. Эта модель определяет строгий набор правил для создания веток и их слияния, что помогает более организованно управлять процессом разработки, особенно в условиях, когда над проектом работает много людей. Он предназначен для упрощения процесса выпуска новых версий программного обеспечения и обеспечения стабильности кодовой базы. 🚩Основные ветки 🟠master Содержит стабильную версию кода, готовую к выпуску (release). 🟠develop Основная ветка для разработки, содержит последние изменения кода для следующего выпуска. 🚩Вспомогательные ветки 🟠feature Для разработки новых функций. Каждая ветка создается для работы над определенной задачей и в конечном итоге сливается с develop. 🟠release Предназначенные для подготовки новых выпусков продукта. В них может вестись работа по исправлению ошибок, документации и другим задачам, связанным с выпуском. После завершения подготовки ветка release сливается с master и с develop. 🟠hotfix Для быстрого исправления ошибок в продакшен-версии. Создаются от ветки master, и после исправления сразу же сливаются обратно в master и develop. Ставь 👍 и забирай 📚 Базу знаний

Скидка до 20% на готовые квартиры — Мкр. «Самолёт» Жилой микрорайон расположен на северо-западе Краснодара, в районе Западного Обхода. Он находится далеко от промышленных предприятий. Здесь будет всё для комфортной жизни: современные дома с разными планировками, школы и детские сады, поликлиника, торговые центры, парки и аллеи. Центр притяжения микрорайона — бульвар длиной 1,6 км с зонами для отдыха и развлечений. На территории проекта расположено: 4 школы, 10 детских садов, спортивные площадки. - Квартиры от 3,8 млн рублей - Квартиры с выгодой до 1,9 млн. рублей - Выгодные условия покупки квартир - ипотечные каникулы с бонусом до 700 000 рублей. Выбирайте квартиру по лучшей цене на сайте! Получить предложение Проектная декларация на сайте https://наш.дом.рф/ #реклама mrqz.me О рекламодателе

🤔 Что будет, если забиндить два контекста подряд? Если контексты в DI фреймворке (например, в Angular, React или NestJS) перекрывают друг друга, то: - Последний контекст (или более локальный) переопределит предыдущий. - Может возникнуть конфликт зависимостей или непредсказуемое поведение. Важно понимать иерархию инжекторов и область действия каждого контекста. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как работает settimeout? Функция setTimeout используется для выполнения кода или функции спустя заданный интервал времени, однократно. Она является частью Web API в браузерах и глобального объекта global в Node.js, что делает её доступной для использования в любом окружении.

let timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
let timeoutID = setTimeout(functionCode[, delay]);

function: Будет вызвана после задержки. functionCode: Строка кода для выполнения (использование этой формы не рекомендуется по соображениям безопасности). delay: Задержка в миллисекундах, после которой будет выполнена функция. Если не указать, по умолчанию будет использовано значение 0. arg1, arg2, ...: Аргументы, которые будут переданы в функцию при её вызове.

function sayHello() {
  console.log('Привет!');
}

// Вызывает функцию sayHello после задержки в 2000 миллисекунд (2 секунды)
setTimeout(sayHello, 2000);

🚩Отмена выполнения setTimeout Вызов ее возвращает идентификатор таймера, который можно использовать для отмены выполнения с помощью функции clearTimeout.

let timerId = setTimeout(sayHello, 2000);

// Отменяет выполнение
clearTimeout(timerId);

🚩Особенности поведения 🟠Минимальная задержка В HTML5 спецификация предусматривает минимальную задержку в 4ms для вложенных таймеров и в некоторых других случаях, что может повлиять на ожидаемое время выполнения. 🟠Задержка в неактивных вкладках Браузеры могут изменять поведение таймеров для неактивных вкладок для оптимизации производительности и энергопотребления. Это может привести к значительно большей задержке, чем указано. 🟠Асинхронность setTimeout не блокирует выполнение кода, который следует за ним. Он лишь запланирует выполнение функции на будущее, позволяя остальному коду продолжать выполняться без ожидания. Ставь 👍 и забирай 📚 Базу знаний

Регистрируйтесь на вебинар SIEM UserGate 💻Расскажет о том, как консалтинг в области информационной безопасности помогает решить проблему кадрового голода и повышает устойчивость бизнес-процессов. 📊На вебинаре будет: - Угрозы и вызовы в области ИБ. Зачем нужен консалтинг? - Виды консалтинговых услуг. Преимущества и наши подходы - Консалтинг - ориентация на бизнес - Практическая безопасность. С чего начать? - Ответы на вопросы 👌Расскажем, как защитить вашу компанию. Регистрируйтесь — будет интересно! Зарегистрироваться #реклама 16+ webinar.usergate.com О рекламодателе

🤔 Для чего существует тег <q>? Тег <q> используется для встроенных (коротких) цитат. Браузер автоматически добавляет кавычки вокруг содержимого. Для длинных цитат используется <blockquote>. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Чем var отличается от const ? Ключевые слова var и const используются для объявления переменных, но они имеют ряд существенных различий, которые важно понимать для правильного использования в коде. 🚩Область видимости (Scope) 🟠Var Объявления переменных с ее использованием имеют функциональную область видимости (function scope), что означает, что переменная доступна везде в функции, где была объявлена. 🟠Const Как и let, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена. 🚩Переназначение и изменение 🟠Var Переменные, объявленные с помощью нее, могут быть переназначены и изменены. Это означает, что после объявления переменной её можно не только изменить, но и полностью переназначить на другое значение. 🟠Const Переменные, объявленные с помощью нее, не могут быть переназначены. Однако, если переменная представляет собой объект или массив, её содержимое может быть изменено (например, можно добавить новое свойство в объект или новый элемент в массив). Важно понимать, что const предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений. 🚩Поднятие (Hoisting) 🟠Var Переменные, объявленные через нее, поднимаются в начало своей функциональной области видимости перед выполнением кода. Однако до их объявления в коде они будут иметь значение undefined. 🟠Const Подобно let, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError. Это явление известно как "временная мертвая зона". 🚩Инициализация 🟠Var Эти переменные можно объявить без инициализации, и их начальное значение будет undefined. 🟠Const Эти переменные требуют обязательной инициализации при объявлении. Если попытаться объявить его без инициализации, это приведет к синтаксической ошибке.

var varVariable = 1;
varVariable = 2; // Переназначение возможно

const constVariable = { a: 1 };
constVariable.a = 2; // Изменение содержимого объекта возможно
// constVariable = { b: 3 }; // Переназначение вызовет ошибку

if (true) {
  var varScope = "доступна везде в функции";
  const constScope = "доступна только в этом блоке";
}
console.log(varScope); // Выведет строку
console.log(constScope); // Ошибка: constScope не определена

Ставь 👍 и забирай 📚 Базу знаний

Купить Solaris HС выгодно в автокредит Специальное предложение! Solaris HС в автокредит. Низкие ставки. ✨Срок от 1 до 8 лет Комфортные условия для покупки стильного, полноприводного кроссовера Solaris HC. Кредит на выгодных условиях только до 30 июня. Узнайте все условия. Узнать цену Изучите все условия кредита (займа) на сайте в соответствующем разделе. Оценивайте свои финансовые возможности и риски. Финансовые услуги оказывает: ПАО "Совкомбанк", АО "Альфа-Банк". #реклама solaris.auto О рекламодателе

🤔 Что такое хэш-таблица? Хэш-таблица — это структура данных, которая хранит пары ключ–значение. Ключи обрабатываются через хэш-функцию, что обеспечивает быстрый доступ к значениям — обычно за константное время. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🎉Разыгрываем пожизненный доступ к AI-ассистенту для поиска работы для 3 подписчиков До запуска Софи остается меньше месяца, поэтому мы решили порадовать вас и устроить конкурс, приуроченный к этому событию. Кто такая Софи? Это первый в России ассистент по поиску работы, который будет сам делать отклики, писать сопроводительные письма, поможет с резюме и подготовкой к собесу, а еще избавит тебя от отказов. Мы работали над ней более полугода, и сейчас хотим подарить бесплатный пожизненный доступ для 3 наших подписчиков. Мы посчитали, стоимость одной такой подписки ну хотя бы на 10 лет составляла бы 420.000 руб. Условия конкурса простые: 1. Подписаться на 4 наших канала: Софи и партнёры Young & Junior - вакансии IT Young Стажёр - стажировки ИТ IT мероприятия для стажеров и студентов 2. Нажать кнопку "участвую" под этим постом. 15 июля, в 19:00, мы в прямом эфире проведем запуск Софи, а в 20:00 опубликуем результаты конкурса в канале Софи и Партнёры. Каждый победитель получит бесплатный доступ к Софи навсегда. Всем удачи и до встречи в прямом эфире🚀