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

Женщина собеседует мужчину

Скилы 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. Умение подбирать правильный технический стек — Какие основные принципы и вопросы нужно задавать, чтобы правильно подобрать стек

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

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

          О проекте

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

            Написать в телеграм