Что такое React.Suspense?

Suspense предназначен для отображения запасного интерфейса (спиннера) во время ожидания дочерних компонентов. Дочерние компоненты в это время могут выполнять асинхронные вызовы API, либо загружаться через lazy load.

В React 18 фича стала стабильной, получила большие архитектурные изменения под капотом и приобрела название “Конкурентные задержки” (Concurrent Suspense). Смена названия никак не отразится на пользователях.

const App = () => {
return (
<Suspense fallback={<Loading />}>
<SuspendedComponent />
<Sibling />
</Suspense>
);
};

👉 @frontendInterview

👉 @frontendInterview

Что такое React.StrictMode?

StrictMode — инструмент для обнаружения потенциальных проблем в приложении. Так же как и Fragment, StrictMode не рендерит видимого UI. Строгий режим активирует дополнительные проверки и предупреждения для своих потомков.

Примечание: Проверки строгого режима работают только в режиме разработки; они не оказывают никакого эффекта в продакшен-сборке. Строгий режим может быть включён для любой части приложения.

На данный момент StrictMode помогает в:
- обнаружении небезопасных методов жизненного цикла
- предупреждении об использовании устаревшего API строковых реф
- предупреждении об использовании устаревшего метода findDOMNode
- обнаружении неожиданных побочных эффектов
- обнаружении устаревшего API контекста
- обеспечение переиспользуемости состояния

👉 @frontendInterview

👉 @frontendInterview

Что такое конкурентный режим?

Конкурентный режим предназначен для более плавной работы приложения на устройстве пользователя.

Одна из областей, где данная фича применяется, это прерываемый рендеринг. Представьте, что пользователь вводит в строку поиска текст. Это событие обновляет состояние компонента, и происходит рендер нового списка результатов. Во время этого процесса залипает ввод: браузер не может обновить введенный в поле текст, так как занимается рендером нового списка результатов. Конкурентный режим исправляет это ограничение, делая рендер прерываемым.

👉 @frontendInterview

Алгоритмы

В этом руководстве содержатся основные сведения об алгоритмах: анализируются различные типы алгоритмов, рассматриваются мето-ды их построения (рекурсия, динамическое программирование и др.), приводятся практические примеры. В конце каждой главы приводятся упражнения, направленные на закрепление пройденного. Для изучения материала требуется знание основ дискретной математики и методов доказательств, а также представление об основных вычислительных задачах и алгоритмах. Желателен практический опыт работы с языком программирования, поддерживающим косвенную адресацию и рекурсию.Издание адресовано студентам и преподавателям технических вузов, а также тем, кто хочет изучить основы алгоритмизации.

👉 @frontendInterview

Spin Around, Touch the Ground

Вам дан массив, состоящий из строк "left" и "right". Каждая строка делает поворот на 90° в соответствующую сторону. Создайте функция, которая вернет количество разворотов на 360°.

Примеры:
["left", "right", "left", "right"] ➞ 0

["right", "right", "right", "right", "right", "right", "right", "right"] ➞ 2

["left", "left", "left", "left"] ➞ 1

👉 @frontendInterview

Знаешь что такое черная пятница в IT?

Хостинг aeza.net устраивает распродажи виртуальных и выделенных серверов на базе процессоров AMD Ryzen 7950X и 7950X3D по очень выгодным ценам.
Вас ожидают скидки до 20%, кэшбек, а так же скидки на панель ispmanager.
Залетай к нам c 11.11 по 18.11 и забирай, пока не разобрали, число серверов ограничено

Наш новостной канал
Реклама. ООО "АЕЗА ГРУПП" ИНН 7813654490 erid: LatgBXPFR

​Что такое 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