Colour Association

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

Пример:
var array = [["white", "goodness"], ...] //returns [{white: 'goodness'}, ...]

👉 @frontendInterview

​Что такое reducer?

reducer - это функция-преобразователь, принимающая на вход текущее состояние и идентификатор действия, которое необходимо совершить над этим состоянием.

Иными словами, reducer возвращает модифицированную требуемым образом версию переданного ему состояния.

Параметром, идентифицирующим действие, обычно выступает объект с полями type (название команды для изменения состояния) и payload (полезная нагрузка - данные, необходимые для модификации).

Эта простая концепция лежит в основе большой части программных решений в рамках React.js для управления состоянием. Она может быть реализована как с использованием хука useReducer, экспортируемого из React, так и в рамках, к примеру, Redux, где она является более развитой.

Вот так может выглядеть реализация функции-преобразователя (reducer):

 export default function reducer(state, action) {
   switch (action.type) {
     case 'add':
       return {
         ...state,
         sum: state.sum + action.payload, 
       }
     default: {
       throw new Error(`Unknown action: ${action.type}`)
     }
   }
 }

А вот так её использование:
import { useReducer } from 'react'
import reducer from './reducer'

const MyComponent = () => {
const [state, dispatch] = useReducer(reducer, sum: 0)

return (
<div>{state.sum}</div>
)
}

Хук useReducer принимает на вход reducer и начальное состояние, а возвращает текущее состояние и функцию dispatch для обращения к reducer.

👉 @frontendInterview

👉 @frontendInterview

Как оптимизировать React-приложение?

- избавиться от причин лишних ререндеров
- вынести тяжелые вычисления в отдельный поток (Web Workers)
- использовать useMemo, useCallback, React.memo для мемоизации вычислений
- избавиться от утечек памяти
- использовать атрибут key в списках
- кэшировать негорячие вычисления
- кэшировать ответы запросов сервера на N минут/секунд (применимо не всегда)

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Как тестировать React-приложение?

- Использовать фреймворк для тестирования, такой как Jest, для запуска и организации тестов.
- Использовать библиотеку для моков, такую как Sinon.js, для мокирования зависимостей в тестах.
- Написать модульные тесты для отдельных компонентов, чтобы убедиться, что они работают правильно изолированно.
- Написать интеграционные тесты, чтобы проверить взаимодействие между компонентами.
- Использовать snapshot-тестирование, чтобы гарантировать результат отрисовки компонента.
- Использовать разработку через тестирование (TDD) для написания тестов перед реализацией функций.
- Написать e2e тесты для тестирования приложения в целом, имитируя взаимодействие пользователя в реальном браузере.

👉 @frontendInterview

Проектирование гибких программ. Как не загнать себя в угол

Бывает так, что при написании программы вы попадаете в тупик. Возможно, это потому, что вы, как оказалось, не учли некоторые особенности исходной задачи. Однако до обидного часто дело в том, что на начальной стадии проектирования вы приняли какое-то решение, выбрали какую-то структуру данных или способ организации кода, который затем оказался слишком ограниченным, а теперь его трудно заменить.

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

👉 @frontendInterview

Alternating Loops

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

Примеры:
combine(['a', 'b', 'c'], [1, 2, 3])
// ['a', 1, 'b', 2, 'c', 3]

combine(['a', 'b', 'c'], [1, 2, 3, 4, 5])
// ['a', 1, 'b', 2, 'c', 3, 4, 5]

combine(['a', 'b', 'c'], [1, 2, 3, 4, 5], [6, 7], [8])
// ['a', 1, 6, 8, 'b', 2, 7, 'c', 3, 4, 5]

👉 @frontendInterview

В чем разница между interface и type в TypeScript?

interface X {
a: number
b: string
}

type X = {
a: number
b: string
};

В ряде случаев они взаимозаменяемы. Однако, различия присутствуют:
- с типами можно использовать пересечение и объединение
- интерфейс можно расширять, строя цепочку наследований
- интерфейс может быть использован для описания класса
- интерфейс может быть использован для описания функции
- в случае, если в одной области видимости объявлено несколько одноимённых интерфейсов, они будут объединены в один
- если в нескольких одноимённых интерфейсах будут описаны одноимённые методы с разными сигнатурами, они будут расценены, как описание перегрузки.

В целом, можно сказать, что ключевое слово type больше подходит для типизации примитивных значений или объектных значений, не являющихся звеньями сложной цепочки. interface же необходим и удобен при осознанном построении объектно-ориентированной архитектуры.

👉 @frontendInterview

​Что такое ErrorBoundary в React?

Error boundaries- это компоненты, которые отлавливают ошибки JavaScript, возникающие в любом дочернем компоненте, сообщают об этих ошибках и отображают резервный UI.

Классовый компонент становится предохранителем при определении в нем нового метода жизненного цикла componentDidCatch(error, info) или static getDerivedStateFromError() :

 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props)
     this.state = { hasError: false }
   }

   componentDidCatch(error, info) {
     // Вы также можете отправлять ошибки в специальный сервис по их обработке
     logErrorToMyService(error, info)
   }

   static getDerivedStateFromError(error) {
      // Обновляем состояние, чтобы при следующем рендеринге использовался запасной UI
      return { hasError: true };
    }

   render() {
     if (this.state.hasError) {
       // Вы можете рендерить любой резервный интерфейс
       return <h1>{'Что-то пошло не так.'}</h1>
     }
     return this.props.children
   }
 }

После этого, предохранитель используется как обычный компонент:
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>

👉 @frontendInterview

👉 @frontendInterview

Селекты, инпуты, батоны и прочие обитатели форм

Зачем они нужны, если есть куча библиотек с красивыми кастомными элементами?

Нужны! и важно уметь с ними работать

✔️ С нативным элементом можно предсказуемо взаимодействовать клавиатурой

✔️ Не возникает косяков с положением выпадающих элементов на экране

✔️ Элемент соответствует настройкам операционной системы

✔️ Контролы доступны скринридерам

✔️ Элемент будет доступен пользователям с ограниченными возможностями

Чтобы разобраться во всех тонкостях создания нативных форм, рекомендую эти тренажеры

Тренажер «Погружение в формы»

Проходить можно прямо в браузере, подача - огонь 🔥