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

Хук useLayoutEffect имеет такое же api как и useEffect. Отличия:

- useLayoutEffect - синхронный и будет вызван до того, как браузер сможет отрисовать компоненты. Срабатывает когда компоненты уже находятся на virtual dom (в памяти и можно прочитать/установить различные свойств), но еще не были отрисованы браузером.
- useEffect - асинхронный и будет вызван после того, как браузер отрисует компоненты.

Хук useLayoutEffect предотвращает лишнее обновление компонента.

👉 @frontendInterview

Что такое порталы в 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