Что такое порталы в React?

Порталы позволяют рендерить дочерние элементы в DOM-узел, находящийся вне DOM-иерархии родительского компонента.

Порталы особенно полезны, когда в родительском компоненте заданы стили overflow: hidden или z-index, и нужно, чтобы дочерний элемент визуально выходил за рамки своего контейнера. Это диалоги, модальные окна или всплывающие подсказки.

👉 @frontendInterview

👉 @frontendInterview

Что такое refs в React?

Рефы дают возможность получить доступ к DOM-узлам, к которым они привязаны.

Ситуации, в которых использование рефов является оправданным:
- Управление фокусом
- Выделение текста
- Вызов scrollTo
- Вызов анимаций
- Интеграция со сторонними DOM-библиотеками
- Другие случаи

В рефах можно хранить любое значение, а не обязательно ссылку на элемент. Изменение поля ref.current не приводит к реренденру компонента.

👉 @frontendInterview

TypeScript Basics: Learn TypeScript from Scratch and Solidify Your Skills with Projects (2023)

Вначале вы рассмотрите некоторые основы, например, как запустить файл TypeScript и скомпилировать его в JavaScript, а также поймете, как он вписывается в полную экосистему наряду с React, Redux, Angular и Webpack. Используя практический подход, вы рассмотрите ключевые концепции и аспекты Typenoscript. После изучения фундаментальных основ вы перейдете к более сложным темам.
Вы также узнаете о декораторах, которые являются обязательной функцией в Angular. Далее в книге представлен небольшой проект со списком дел, за которым следует более крупный проект "Drag and Drop". Вы увидите, как разделить проект на небольшие управляемые модули, и узнаете, как сделать проект более эффективным с помощью Webpack. Наконец, вы создадите еще два React-проекта с использованием React и Redux.

👉 @frontendInterview

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