Всем привет!

Как правильно ответить на вопрос «Что такое чистая функция?», если различные источники дают разные трактовки? Кажется, мы нашли лучшее определение этому понятию. Следите за ходом мысли.

➡ Функция должна иметь только одну точку входа и только одну точку выхода из нее. Давайте назовем их ординарными, так как эти точки работают максимально ожидаемо. Следовательно, максимальная ожидаемая точка входа — это аргументы функции, а точка выхода — оператор return.

Почему только по одной точке на вход и выход?

⚫ Абсолютно любой другой вход в функцию — это использование внешних переменных, функций и т.д. — побочное действие.
⚫ Абсолютно любой другой выход из функции — присвоение значений внешним переменным, операции ввода/вывода, HTTP-запросы — побочное действие.

В итоге мы имеем следующее определение:

Чистая функция — это функция, которая имеет только одну ординарную точку входа (ее аргументы) и одну ординарную точку выхода (оператор return).

+1 понятие в вашу копилку.

@chulakov_dev

Всем привет!

Давайте разберем вчерашний вопрос «Какой функциональный объект в JS можно назвать функтором?».

✅ Правильный ответ — вариант № 2: объект, реализующий метод map.

Объясняем, почему.

Функтор в JS — это объект, который получает некие значения, преобразует их с помощью внутренней чистой функции и возвращает результат с аналогичной структурой данных. Среди наших вариантов ответа такой метод только один, и это — map.

ℹ Теперь давайте рассмотрим другие варианты.

Sort — изменяет входной массив, т.е. он не является чистой функцией.

Reduce — также может вернуть аналогичную структуру, но это не гарантированно, т.к. он более универсален.

Next — метод для передачи данных следующей итерации, и он не используется для преобразования.

Если остались еще вопросы, задавайте.

@chulakov_dev

Привет, друзья!

🤔 Интересно, вы когда-нибудь слышали о методе requestIdleCallback?

Сегодня поговорим о нем.

⚫️Метод requestIdleCallback очень редко используется, но в некоторых моментах он может значительно оптимизировать ваш код. Его суть заключается в следующем: метод принимает в качестве первого аргумента колбэк, который ставит в очередь Task Queue, и этот колбэк выполняется, когда браузер находится в режиме простоя.

Другими словами, когда браузеру «нечего делать», он может взять функцию, переданную через requestIdleCallback, и выполнить ее, тем самым не мешая выполнению других задач, когда это необходимо.

⚫️Вторым аргументом он принимает дополнительные параметры, но пока реализован только один — timeout. В нем вы можете указать максимальное время (в миллисекундах), которое потребуется колбэку на выполнение. Если он не уложится в отведенное вами время, выполнение колбэка прервется.

Этот метод пока не поддерживается в Safari, но мы надеемся, что специалисты из Apple вскоре реализуют такую классную возможность.

@chulakov_dev

Всем привет!

Многие из вас наверняка знают про метод stopPropagation. Он связан с таким понятием, как event bubbling, а сам он останавливает действие всплытия/погружения наступившего события.

Но (для нас это не было неожиданностью) почти никто не знает о его брате — методе stopImmediatePropagation. Он используется намного реже stopPropagation, но знать о нем нужно и важно.

➡ Метод stopImmediatePropagation останавливает все всплытия/погружения всех событий на определенном HTML-элементе. Допустим, если один элемент регистрирует у себя несколько событий, например от нескольких дочерних элементов, и они все начинают всплывать, то метод stopPropagation остановит только один из них, а stopImmediatePropagation — все.

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

@chulakov_dev

Всем привет!

Сегодня хотим рассказать интересный факт о скорости разных циклов. Вы знали, что forEach работает быстрее обычного for в 2–4 раза?

➡Вот доказательство:

const arr = new Array(10000).fill(0).map((_, i) => i);

function forFn() {
  let res;

  for (let i = 0; i < arr; i++) res = arr[i];
}

function forEachFn() {
  let res;

  arr.forEach(item => res = item);
}

function calculateLoopTime(callback) {
  const time = performance.now();
  callback();

  console.log(performance.now() - time);
}

calculateLoopTime(forFn); // от 0.3s до 0.7s
calculateLoopTime(forEachFn); // от 0 до 0.3s

➡Почему так происходит: for для работы своих итераций требуется каждый раз создавать переменную с текущим индексом, в то время как forEach обращается к элементу массива по его внутреннему индексу, а это гораздо быстрее.

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

@chulakov_dev

Привет, друзья!

Сегодня мы коснемся важной темы: как правильно использовать key при рендеринге списков в React.

🔑 Key — это специальный атрибут для эффективного сопоставления элементов при изменении списка (и не только, но сейчас не об этом). Он критически важен для оптимальной производительности.

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

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

❓ Как же решить эту проблему и обезопасить себя?

Используйте уникальные ID в качестве ключей. Если данные приходят с бэкенда, они, вероятно, уже имеют ID. На клиентской стороне вы можете указать сами уникальные идентификаторы или использовать библиотеку Nanoid для генерации, но делать это нужно не в момент рендера, а при определении массива. Кстати, по этой же причине и не рекомендуется применять метод Date.now().

Может показаться, что использовать Date.now() в качестве уникального ID — это быстрый и простой способ. Но здесь скрыта уязвимость: если вы попытаетесь создать два элемента одновременно, получите два одинаковых ID. Поэтому вместо поиска быстрых решений лучше довериться проверенным инструментам и способам.

😕 Вы могли заметить, что мы не упомянули хук useId. Дело в том, что такие идентификаторы будут уникальны только в рамках компонента, а нам нужны ID, которые уникальны глобально в рамках всего приложения.

Используя уникальные ключи в списках React, вы существенно оптимизируете работу приложения. Избегайте соблазна простого индексирования и дарите своим пользователям плавный и приятный опыт взаимодействия!

@chulakov_dev

Друзья, привет!

➡️ Сегодня поговорим про замечательную функцию от Next.js — Incremental Static Regeneration (ISR) — и про то, как ревалидировать данные на уровне страницы по таймеру. Тема актуальна для всех, кто использует версию Next.js >= 12.4.

ISR — это функциональность, которая позволяет динамически обновлять статические страницы после сборки проекта, не пересобирая весь сайт, что очень полезно при частом обновлении контента (новости, цены в каталоге и т.д.).

↪️ По сути, это комбинация из лучшего, что есть у SSR/RSC и SSG, которая работает следующим образом:
— при первом запросе к странице отдается кешированная версия из сборки;
— затем в фоновом режиме запускается повторная генерация страницы через вызов getStaticProps;
— если генерация прошла успешно, обновленная версия попадает в кеш;
— при ошибке продолжит отдаваться предыдущая версия из кеша;
— так достигается отказоустойчивость;
— кеширование происходит локально на сервере, на Vercel кеш глобальный и автоматически распределяется (об этом сегодня не будем говорить).

Управлять ISR можно так:
— частоту обновления задать через revalidate в секундах в getStaticProps;
— принудительно очистить кеш через API-метод revalidate;
— On-demand revalidation при обновлении данных.

// пример использования

export const getStaticProps = async () => {

  return {
    props,
    revalidate: 10, // ревалидировать каждые 10 секунд
  }


}


// On-demand 
await res.revalidate('/some-page')

Таким образом, ISR позволяет оптимально сочетать скорость статической генерации и гибкость обновления данных. Рекомендуем для сайтов с часто меняющимся контентом!

@chulakov_dev

Всем привет!

В новой статье на Хабре мы разобрали основные особенности языка Kotlin. Рассмотрели такие важные аспекты, как безопасность работы с null-значениями, гибкость типизации с помощью Generics, возможности расширения функциональности с помощью extension-функций, inline-функции и многое другое.

А еще поделились ссылками на полезные материалы, которые пригодятся в изучении Kotlin.

➡️Читайте и подписывайтесь на наш блог.

@chulakov_dev