С чем работал в React

Вопрос

С чем работал в React

Профессия

Frontend Developer

Что хочет услышать интервьюер

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

Ключевые тезисы

• Работал с функциональными компонентами и хуками (useState, useEffect, useContext, useReducer, useCallback, useMemo).
• Использовал React Router для навигации и управления состоянием маршрутов в SPA.
• Опыт работы с управлением состоянием через Redux (Thunk/Saga) или Context API.
• Интеграция с REST API и GraphQL (Apollo Client, React Query).
• Оптимизация производительности (React.memo, useMemo, lazy loading, Suspense).
• Работа с формами (Formik, React Hook Form) и валидацией.
• Использование TypeScript с React для типизации пропсов, состояния и хуков.
• Тестирование компонентов (Jest, React Testing Library, Cypress).
• Опыт работы с SSR (Next.js) или статической генерацией (Gatsby).
• Кастомизация UI с помощью библиотек (Material-UI, Ant Design, Tailwind CSS) или собственных решений.

Подробный ответ

React — это популярная библиотека для создания пользовательских интерфейсов, и в ней я работал с различными ключевыми концепциями и инструментами. В первую очередь, это функциональные компоненты и хуки, такие как useState для управления локальным состоянием, useEffect для побочных эффектов (например, запросов к API), useContext для доступа к контексту приложения, useReducer для сложного состояния и useCallback и useMemo для оптимизации производительности. Также я использовал React Router для навигации в SPA, что позволяет управлять маршрутами и состоянием URL без перезагрузки страницы. Для управления глобальным состоянием применял Redux (с Thunk или Saga) или Context API, в зависимости от сложности приложения. Кроме того, интегрировал React с REST API и GraphQL (через Apollo Client или React Query), что позволяет эффективно получать и обновлять данные. Для оптимизации производительности использовал React.memo, useMemo, lazy loading и Suspense. Работал с формами через Formik или React Hook Form, а также с валидацией. TypeScript применял для типизации пропсов, состояния и хуков, что повышает надежность кода. Тестировал компоненты с помощью Jest, React Testing Library и Cypress. Имею опыт работы с SSR через Next.js и статической генерацией через Gatsby. Для UI использовал библиотеки вроде Material-UI, Ant Design или Tailwind CSS, а также создавал собственные решения.

Практические примеры

Пример 1

Пример использования useState и useEffect:

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`https://api.example.com/users/${userId}`)
      .then(response => response.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      });
  }, [userId]);

  if (loading) return <div>Loading...</div>;
  return <div>{user.name}</div>;
}

Пример 2

Пример использования 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>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

Пример 3

Пример работы с React Router:

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

Частые ошибки

• Использование useState для сложного состояния, когда лучше подходит useReducer.
• Неоптимальное использование useEffect, например, отсутствие зависимостей или их избыточность, что приводит к лишним ререндерам.
• Игнорирование типизации в TypeScript, что снижает надежность кода.

Связанные темы

• Virtual DOM и алгоритм реконсиляции в React.
• Принципы работы Redux (хранилище, редьюсеры, actions).
• GraphQL и его отличие от REST.
• Server-Side Rendering (SSR) и Static Site Generation (SSG).

Follow-up вопросы

Как ты выбираешь между useState и useReducer для управления состоянием?

Уровень: intermediate

useState подходит для простого локального состояния, а useReducer — для сложной логики или когда следующее состояние зависит от предыдущего. Например, useReducer удобен для форм с множеством полей или при работе с API.

Как ты оптимизируешь производительность React-приложений?

Уровень: advanced

Использую React.memo для мемоизации компонентов, useMemo и useCallback для кеширования вычислений и колбэков. Также применяю lazy loading для динамической загрузки компонентов и Suspense для отображения fallback.

Какие преимущества у GraphQL перед REST в контексте React?

Уровень: intermediate

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

Как ты тестируе React-компоненты?

Уровень: basic

Для unit-тестов использую Jest и React Testing Library, чтобы проверить рендеринг и поведение компонентов. Для e2e-тестов применяю Cypress, чтобы имитировать действия пользователя.

Почему стоит использовать TypeScript с React?

Уровень: intermediate

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