Вопросы для собеседования Frontend ( React ) Middle+ | Senior в 2024

HR енот собеседует разработчика

Скилы Frontend-разработчика

Минимальный набор hard-скилов и технологий, с которыми должен быть знаком специалист ( набор может меняться от вакансии к вакансии )

  1. Javascript
  2. Typescript
  3. React / Angular / Vue ( или любой другой frontend фреймворк | библиотека )
  4. Styled-component, css-inline, Sass
  5. Redux / Redux-toolkit / Redux-Saga
  6. RTK Query
  7. Git ( или опыт с любым другим удаленным репозиторием )
  8. Архитектура ( Знание основных. Опыт выбора и внедрения под проект )
  9. Yarn / Npm
  10. Next.js | Vite.js
  11. Webpack / Rollup / Vite
  12. Css + Html ( верстка, семантика, адаптация, базовая оптимизация )
  13. Scss, Less ( и любые другие препроцессоры )
  14. CI/CD
  15. Scum / Agile
  16. Node.js
  17. Figma ( или любой другой сервис для работы с дизайном / wireframe )

Общие вопросы

  1. Event loop — Что это, как работает, частью какого механизма является, сколько очередей и т.д. ( важно понимать весь процесс )
  2. Dom и Виртуальный DOM — Что такое Dom, как формируется и в чем отличие от Виртуального Dom ( Виртуальный DOM является частью фреймворков )
  3. Как работает браузер
  4. Что происходит при вводе запроса в поисковую строку
  5. В чем разница между » == » и » === «?
  6. Паттерны программирования
  7. Архитектурные решения — Какие знаете, в чем отличия, как выбирать правильный для проекта
  8. Принципы Solid — Что такое принципы разработки Solid
  9. Принцип kiss, dry
  10. API, Rest API — Что это, в чем разница
  11. CI / CD — Что это и как работает

Вопросы по Javascript

Оставляю основные вопросы, которые не только встречаются чаще всего, но и действительно необходимы для frontend-разработчика на практике

1. Big O Notation — Нотация для описания сложности алгоритмов ( помогает правильно выбирать методы работы с данными, выбирая наиболее оптимальный для экономии ресурсов )

2. Словари ( Set, Map )Set хранит уникальные значения любого типа, Map хранит пары ключ-значение. В Set значение может появляться только один раз, в Map ключи могут быть любого типа.

3. Чистые функции — Чистые функции всегда возвращают один и тот же результат при одинаковых аргументах и не имеют побочных эффектов.

Пример:

function add(a, b) {
  return a + b;
}

4. Async/Awaitasync/await используются для работы с промисами. Функция, объявленная с async, возвращает промис, await приостанавливает выполнение до разрешения промиса.

Например:

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

5. PromisePromise представляет результат асинхронной операции и может находиться в одном из состояний: ожидание, выполнено или отклонено.

Например:

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Done!"), 1000);
});
promise.then(result => console.log(result));

6. Область видимости — Область видимости определяет видимость переменных и функций в разных частях кода. Существует глобальная и локальная (функциональная, блочная) область видимости.

Например:

function example() {
  let local = "local";
  console.log(local);
}

7. Замыкания — это функции, которые запоминают своё окружение при создании.

Например:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  }
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

8. Нововведения в ES6

ES6 ввел новые возможности, такие как стрелочные функции, let и const, шаблонные строки, деструктуризация, классы и модули.

9. Стрелочные функции — Стрелочные функции имеют краткий синтаксис и не имеют собственного this.

Например:

const add = (a, b) => a + b;

10. Отличие стрелочных функций от обычных

1. Синтаксис

Обычные функции

function myFunction() {
  // тело функции
}

Стрелочные функции

const myFunction = () => {
  // тело функции
}

2. Контекст (this)

  • В обычных функциях this определяется в момент вызова функции и может изменяться в зависимости от контекста вызова (например, при использовании call, apply или bind).
  • В стрелочных функциях this лексически привязан к контексту, в котором была объявлена функция, и не изменяется.

3. Аргументы

  • В обычных функциях доступен объект arguments, который содержит все переданные аргументы.
  • В стрелочных функциях объекта arguments нет, но можно использовать операторы rest (...args).

4. Конструктор

  • Обычные функции могут быть использованы как конструкторы (с ключевым словом new), создавая новые объекты.
  • Стрелочные функции не могут быть использованы как конструкторы и вызов с new приведет к ошибке.

5. Собственные методы и свойства

  • Обычные функции имеют свои собственные методы и свойства (например, prototype).
  • Стрелочные функции не имеют собственных методов и свойств.

Пример:

function RegularFunction() {
  this.value = 1;
  setTimeout(function() {
    console.log(this.value); // undefined, так как `this` указывает на глобальный объект или `undefined` в строгом режиме
  }, 1000);
}

const ArrowFunction = () => {
  this.value = 1;
  setTimeout(() => {
    console.log(this.value); // 1, так как `this` лексически привязан к контексту объявлении функции
  }, 1000);
}

const regularFunc = new RegularFunction();
const arrowFunc = ArrowFunction();

11. Анонимные функции — Анонимные функции не имеют имени и часто используются как аргументы для других функций.

Например:

setTimeout(function() {
  console.log("Hello, world!");
}, 1000);

12. Основные типы данных в JS

В JavaScript существуют примитивные типы данных: string, number, boolean, null, undefined, symbol, и bigint. Также есть сложные типы: object и function.

13. JS компилируемый или интерпретируемый язык

JavaScript является интерпретируемым языком, выполняемым браузером или сервером (Node.js) непосредственно.

14. Каррирование — это трансформация функции с множеством аргументов в последовательность функций с одним аргументом.

Например:

function add(a) {
  return function(b) {
    return a + b;
  }
}
const addFive = add(5);
console.log(addFive(3)); // 8

15. Разница null и undefined

null — это намеренное отсутствие значения, undefined означает, что значение не было присвоено.

Например:

let a;
console.log(a); // undefined
let b = null;
console.log(b); // null

16. Объекты — это коллекции пар ключ-значение.

Пример:

const person = {
  name: "John",
  age: 30
};

Вопросы по React

1. Функция высшего порядка

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

Пример:

// Функция высшего порядка, принимающая функцию в качестве аргумента
function higherOrderFunction(callback) {
  const result = callback(5);
  console.log(result);
}

// Функция, передаваемая в качестве аргумента
function multiplyByTwo(num) {
  return num * 2;
}

// Вызов функции высшего порядка
higherOrderFunction(multiplyByTwo); // Выведет: 10

2. Hook ( хуки )

Хуки (hooks) — это функции, которые позволяют использовать состояние и другие возможности React в функциональных компонентах. Хуки были введены в React версии 16.8. Основные хуки включают:

Основные хуки включают:

  • useState
  • useEffect
  • useContext
  • useReducer
  • useMemo
  • useCallback
  • useRef

useMemo

Возвращает мемоизированное значение. Он используется для оптимизации производительности, предотвращая повторные вычисления значений, которые зависят от входных данных.

Пример:

import React, { useMemo } from 'react';

function ExpensiveComponent({ a, b }) {
  const result = useMemo(() => {
    // Дорогая вычислительная операция
    return a + b;
  }, [a, b]);

  return <div>{result}</div>;
}

useState

Используется для добавления состояния в функциональные компоненты.

Пример:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>Нажми меня</button>
    </div>
  );
}

useCallback

Возвращает мемоизированную версию коллбека, который изменяется только если изменяются зависимости.

import React, { useCallback, useState } from 'react';

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

  const memoizedCallback = useCallback(() => {
    console.log(count);
  }, [count]);

  return <button onClick={memoizedCallback}>Log Count</button>;
}

useContext

Используется для доступа к контексту из функциональных компонентов.

import React, { useContext, createContext } from 'react';

const MyContext = createContext();

function ContextComponent() {
  const value = useContext(MyContext);

  return <div>{value}</div>;
}

function App() {
  return (
    <MyContext.Provider value="Hello, world!">
      <ContextComponent />
    </MyContext.Provider>
  );
}

useEffect

Выполняет побочные эффекты в функциональных компонентах, такие как загрузка данных или изменение DOM.

import React, { useEffect, useState } from 'react';

function DataFetchingComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

useRef

Возвращает изменяемый объект, который сохраняет свое текущее значение между рендерингами. В отличие от useState, изменение значения useRef не вызывает повторный рендеринг компонента.

import React, { useRef, useState } from 'react';

function RefComponent() {
  const inputRef = useRef(null);
  const [value, setValue] = useState('');

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} value={value} onChange={e => setValue(e.target.value)} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

useReducer

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

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Счет: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

3. В чем разница между useMemo и useCallback?

useMemo мемоизирует значение, тогда как useCallback мемоизирует саму функцию. Оба они принимают массив зависимостей и обновляют мемоизированное значение или функцию только тогда, когда изменяются зависимости.

4. Состояние приложения

Состояние приложения (application state) — это данные, которые управляют поведением и рендерингом приложения. Хуки для работы с состоянием включают useState и useReducer. Популярные библиотеки для управления состоянием:

  • Redux
  • MobX
  • Recoil
  • Zustand

5. Redux / Redux-toolkit

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

Пример использования Redux-toolkit:

import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0 },
  reducers: {
    increment: state => { state.count += 1; },
    decrement: state => { state.count -= 1; },
  },
});

const store = configureStore({ reducer: counterSlice.reducer });

store.dispatch(counterSlice.actions.increment());
store.dispatch(counterSlice.actions.decrement());
console.log(store.getState()); // { count: 0 }

6. Что такое reducer в Redux?

Редьюсер (reducer) — это функция, которая определяет, как состояние приложения изменяется в ответ на действия (actions). Он принимает текущее состояние и действие, возвращает новое состояние.

7. Стадии жизненного цикла компонента

Компоненты в React проходят следующие стадии жизненного цикла:

  • Монтирование (Mounting): componentDidMount
  • Обновление (Updating): componentDidUpdate
  • Размонтирование (Unmounting): componentWillUnmount

8. Чем управляемые компоненты отличаются от неуправляемых

Управляемые компоненты (controlled components) управляют своим состоянием через props и функции обратного вызова, тогда как неуправляемые компоненты (uncontrolled components) управляют своим состоянием через прямой доступ к DOM элементам, используя ref.

9. Рендеринг списков, зачем нужны ключи ( key )

Ключи (keys) нужны для идентификации элементов списка. Они помогают React определять, какие элементы изменились, добавились или удалились, улучшая производительность при обновлении UI.

10. В чем разница между классовыми и функциональными компонентами?

Классовые компоненты используют классы для создания компонентов и поддерживают состояние и методы жизненного цикла через методы класса. Функциональные компоненты — это функции, которые принимают props и возвращают элементы React. С хуками функциональные компоненты могут иметь состояние и побочные эффекты.

11. Что такое реквизиты | пропсы в React?

Пропсы (props) — это входные данные, передаваемые компоненту, позволяющие ему получать информацию из родительского компонента.

12. Когда лучше использовать локальное состояние, а когда глобальное?

Локальное состояние используется для управления данными, которые нужны только в одном компоненте. Глобальное состояние используется для данных, которые должны быть доступны в нескольких компонентах.

13. Что такое условный рендеринг элементов?

Условный рендеринг позволяет отображать разные элементы в зависимости от условия.

Пример:

import React from 'react';

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
}

14. Что такое React.memo()

React.memo — это HOC, который мемоизирует компонент, предотвращая его повторный рендеринг, если его props не изменились.

Пример:

import React from 'react';

const MyComponent = React.memo(function MyComponent({ value }) {
  return <div>{value}</div>;
});

15. Как получить доступ к элементу DOM?

Доступ к элементу DOM можно получить с использованием useRef.

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputRef = useRef(null);

  const onButtonClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </div>
  );
}

16. Что такое пользовательский хук?

Пользовательский хук — это функция, использующая хуки, чтобы инкапсулировать и переиспользовать логику состояния или побочных эффектов.

Пример:

import { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

17. SPA, SSR, SSG

SPA (Single Page Application) — одностраничное приложение, где всё приложение загружается одной HTML-страницей, и переходы между «страницами» осуществляются через JavaScript.

SSR (Server-Side Rendering) — рендеринг на стороне сервера, где HTML генерируется на сервере и отправляется клиенту для каждого запроса.

SSG (Static Site Generation) — статическая генерация сайта, где HTML генерируется на этапе сборки, а не на сервере или клиенте.

Различия:

  • SPA имеет быстрые клиентские переходы, но может иметь более длительное начальное время загрузки.
  • SSR позволяет быстро отображать контент для SEO и начальной загрузки, но может быть медленнее при каждом запросе.
  • SSG обеспечивает очень быструю загрузку и рендеринг, так как страницы заранее генерируются и раздаются как статические файлы.

Soft-скилы

  1. Самостоятельное решение задач — Процесс поиска решения задачи, когда стоит идти к команде
  2. Умение выстраивать приоритетность задач — Как определить приоритетность задачи, как формировать порядок и т.д.
  3. Работа в команде / управление командой — Как строится, как происходит взаимодействие и т.д.
  4. Работа по метологиям Scrum / Agile — Что это такое, как внедрить и какой есть релевантный опыт
  5. Умение описывать проблемы и формировать отчеты — Что такое аудит, как проводить, зачем нужен
  6. Введение технической документации — Для чего нужна такая документация
  7. Чтение технической документации ( в том числе на английском ) — Есть ли релевантный опыт
  8. Wireframe — Что такое, для чего нужно проектирование и прототипирование интерфейсов
  9. Понимание приницпов дизайна ( как формируются отступы, группируются элементы, как правильно формировать ui-kit и как с ним работать ) — Что такое ui-kit, какие реальные проблемы работы с макетами от дизайнеров были
  10. Умение подбирать правильный технический стек — Какие основные принципы и вопросы нужно задавать, чтобы правильно подобрать стек
Tasty Coffee

Консультация

Оставьте заявку на консультацию

Отправляя заявку, вы соглашаетесь с политикой конфиденциальности

О проекте

Расскажите о проекте, чтобы я мог подготовить предварительное предложение

Отправляя заявку, вы соглашаетесь с политикой конфиденциальности

Заявка на тариф

Оставьте заявку на выбранный тариф и я свижусь с вами в ближайшее время

Отправляя заявку, вы соглашаетесь с политикой конфиденциальности