Как отследить размонтирование функционального компонента в React?

Очень часто useEffect создает ресурсы, которые необходимо очистить или сбросить до того, как компонент покинет экран, например подписку или идентификатор таймера.

Для этого функция, передаваемая в useEffect, может возвращать функцию очистки. Функция очистки запускается перед удалением компонента из пользовательского интерфейса для предотвращения утечек памяти. Кроме того, если компонент отображается несколько раз (как это обычно бывает), то перед выполнением следующего эффекта предыдущий эффект очищается.

useEffect(() => {
function handleChange(value) {
setValue(value);
}
SomeAPI.doFunction(id, handleChange);

return function cleanup() {
SomeAPI.undoFunction(id, handleChange);
};
})

👉 @frontendInterview

Принципы юнит-тестирования

Юнит-тестирование — это процесс проверки отдельных модулей программы на корректность ра боты. Правильный подход к тестированию позволит максимизировать качество и скорость разработки проекта. Некачественные тесты, наоборот, могут нанести вред: нарушить работоспособность кода, увеличить количество ошибок, растянуть сроки и затраты. Грамотное внедрение юнит тестирования — хорошее решение для развития проекта.

👉 @frontendInterview

Shortest Word

Дана строка слов, верните длину самого короткого слова.
Строка никогда не будет пустой, и вам не нужно учитывать различные типы данных.

Пример:
findShort("Let's travel abroad shall we") => 2

👉 @frontendInterview

​Web Workers

Web worker — это API, которое позволяет выполнять код вне основного потока. Благодаря этому долгие или сложные вычисления, которые выполняются на воркерах, не блокируют пользовательский интерфейс (UI).

Веб воркер создается в основном потоке. При создании воркеру передается URL-адрес скрипта. После загрузки создается отдельный поток, в котором выполнится скрипт воркера.
У скрипта будет свой собственный контекст, отличный от контекста окна window. В основном потоке глобальный контекст привязывается к переменной window, а в воркере — к переменной self. Контекст выполнения веб воркера WorkerGlobalScope отличается от контекста выполнения основного потока. У него нет доступа к объекту документа document и DOM API.

Особенности потока выполнения
Поток, в котором выполняется код воркера, изолирован от основного. В Chromium каждому из этих потоков соответствует свой собственный экзепляр движка JavaScript. Из-за этого создание нового воркера считается «тяжёлой» операцией. Обычно предполагают, что воркеров будет немного, и они будут долго жить.

Как создать и запустить?
Воркер использует механизм сообщений для общения с основным потоком. Для отправки сообщения используется метод postMessage().
// Основной поток: app.js
const worker = new Worker('worker.js');

// Отправляем сообщение из основного потока в воркер
worker.postMessage({ message: '415тый, я база, ответьте' });

В глобальном контексте воркера есть обработчик onmessage(). Его можно использовать, чтобы принимать сообщения. Воркер также может отправлять сообщения в основной поток при помощи функции postMessage(). Функцию можно вызывать в любом месте воркера.
// Воркер: worker.js
onmessage = function (e) { // Слушаем сообщения из основного потока
if (e.message === "415ый, я база, ответьте") {
// Отправляем сообщение из воркера в основной поток
postMessage("База, это 415ый, как слышно?");
}
};

Чтобы получать сообщения в основном потоке, используйте метод-обработчик onmessage объекта Worker.
// window context app.js
const worker = new Worker("worker.js");

worker.postMessage({ message: "415тый, я база, ответьте" });

worker.onmessage = function (e) { // Слушаем сообщения из воркера
console.log(e);
// База, это 415-ый, как слышно?
};

👉 @frontendInterview

👉 @frontendInterview

Считаешь себя экспертом в IT? Участвуй в «Цифровом марафоне» от Сбера и «Школы 21» и будь на код впереди! Миллион рублей уже ждёт тебя.

В этом масштабном конкурсе ты будешь соревноваться со специалистами по всей России. Тройка лучших поделит в финале в Москве призовой фонд в 1,8 миллионов рублей.

Но сначала нужно пройти онлайн-игру, тестирование и цифровой диктант. Начнёшь с «разминки» и покажешь свои аналитические и мягкие навыки. Далее — ответь на вопросы теста согласно своему уровню подготовки. Прослушай на диктанте техническое задание и напиши код решения.

Поспеши: 20 апреля — твой последний шанс нажать на кнопку «Хочу участвовать». Переходи на сайт и регистрируйся прямо сейчас!

Плавное раскрытие выпадающего меню

Иногда встречается задача: создать выпадающее меню, которое будет плавно раскрываться. В этом рецепте будет решение на чистом CSS. Вся магия кроется в единицах измерения lh. Будем менять высоту строки, тем самым добившись эффекта плавного раскрытия меню.

👉 @frontendInterview

Как выжить на первом испытательном сроке в IT и не только

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

👉 @frontendInterview

Типичная стыковка фронта с бэком

👉 @frontendInterview

​Как организовать переиспользование компонентов в React?

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

1. Компоненты высшего порядка (HOC): Создание компонентов высшего порядка позволяет оборачивать другие компоненты, добавляя им определенное поведение. Это полезно для изоляции логики, которую вы хотите применить к нескольким компонентам.

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

3. Render Props: Создание компонентов, которые передают функцию через свойство children или другое определенное свойство. Это позволяет другим компонентам использовать эту функцию для внедрения своего контента.

4. Хуки (Hooks): С React 16.8, хуки позволили переиспользовать состояние и логику в функциональных компонентах без использования классов. Вам даже можно создавать собственные пользовательские хуки для изоляции определенной функциональности.

5. Библиотеки компонентов: Существует множество библиотек компонентов, таких как Material-UI, Ant Design, Chakra UI и другие, предоставляющие готовые компоненты для переиспользования в ваших проектах.

6. Компоненты страниц (Page Components) и компоненты макета (Layout Components): Разделение компонентов на те, которые отвечают за макет (навигация, боковая панель и т.д.) и те, которые отвечают за конкретное содержание страницы, может существенно повысить переиспользование.

7. Контейнеры и компоненты представления (Containers and Presentational Components): Разделяйте компоненты на "умные" контейнеры, которые управляют состоянием и бизнес-логикой, и "глупые" компоненты представления, которые отображают данные, переданные им из контейнеров.

👉 @frontendInterview

Кодер с улицы. Правила нарушать рекомендуется

Эта книга — справочник по выживанию для начинающего разработчика.

«Кодер с улицы» научит вас справляться с реальными задачами. Седат Капаноглу честно делится советами, основанными на личном опыте, а не на абстрактной теории. Вы узнаете, как адаптировать знания, полученные из книг и курсов, к повседневным рабочим задачам. Пора узнать, как использовать антипаттерны и «плохие» методы программирования.

👉 @frontendInterview

shorter concat [reverse longer]

Даны 2 строки, a и b, верните строку вида:
короче+обратная(длиннее)+короче.

👉 @frontendInterview

​Что такое CSS препроцессоры?

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

Самый популярный препроцессор - SASS (Syntactically Awesome Style Sheet). SASS может быть написан с использованием двух разных синтаксисов: SASS или SCSS.

SASS синтаксис:

 $font-color: #aaaccc
 $bg-color: #eeefff

 .element
   color: $font-color
   background: $bg-color

SCSS синтаксис:

 $font-color: #aaaccc;
 $bg-color: #eeefff;

 .element {
   color: $font-color;
   background: $bg-color;
 }

Синтаксис SCSS считается более удобным и CSS-оподобным. Также среди отличий - разрешение файлов (.sass и .scss)

Препроцессор LESS (Leaner Style Sheets) легко интегрируется в проекты с использованием JavaScript. Синтаксис такой же, как у SCSS, но с некоторыми отличиями:

 @font-color: #aaaccc;
 @bg-color: #eeefff;

 .element {
   color: @font-color;
   background: @bg-color;
 }

Препроцессор Stylus предлагает большую гибкость в своем синтаксисе, поддерживает нативный CSS, а также позволяет опускать скобки, двоеточия и точки с запятой. Спецсимволы для определения переменных не используются:

font-color = #aaaccc;
bg-color = #eeefff;

.element
color: font-color;
background: bg-color;

👉 @frontendInterview

👉 @frontendInterview

Блок по центру экрана

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

👉 @frontendInterview