Прощайте, useState и useEffect: революция в React

Многие разработчики продолжают использовать хуки useState и useEffect для обновления состояний, но мне такой подход не нравится. Проблема заключается в том, что компонент одновременно монтируется, перемонтируется и размонтируется, что приводит к неожиданному поведению.

Ссылка

#react

👋 Всем привет, сегодня хотелось бы рассказать про метод массива под названием flatMap()

FlatMap объединяет в себе функции map и метода массивов filter. Рекомендую использовать flatMap() вместо комбинации filter() и map().

В отличие от комбинации filter() и map(), flatMap делает один проход и не создает промежуточного массива 😱

Ниже будут примеры реализации⬇️

Это пример с использованием filter и map после каждого прохода по массиву будет создаваться новый объект

 numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const squaredOddNumbers = numbers
    .filter(num => num % 2 !== 0) 
    .map(num => num * num)

console.log(squaredOddNumbers); // [1, 9, 25, 49, 81]

Этот пример с использованием flatMap() и тут можем наблюдать один проход по массиву и отсутвие промежуточных массивов

 numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const squaredOddNumbers = numbers.flatMap(num => 
    num % 2 !== 0 ? [num * num] : []
);


console.log(squaredOddNumbers); // [1, 9, 25, 49, 81]

И забыл сказать что при использовании flatMap() также применяется функция flat() на каждое возвращаемое значение и тем самым поднимает вложенные массивы на 1 уровень

Более подробно можете прочитать здесь, я хотел вам показать возможно не очевидный кейс использования flatMap() вместо map и filter


Пишите в комментариях как вам такой способ использования flatMap

Задачка на знание React

Напиши React hook с названием useFetch, который получает на вход URL для загрузки и возвращает полученные данные. Для загрузки данных можно использовать любое API, даже собственно придуманное. Для простоты считаем, что по указанному адресу будет JSON, загружаем методом GET, никаких других методов, заголовков и типов данных не требуется. Импорты можно не писать.

Если вы тоже в вечном поиске классных фронтендеров или сами часто проходите собесы - велком в эту статью

Ссылка

#react

Итераторы и генераторы в JavaScript

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

В этой статье вы разберетесь что такое итераторы и генераторы

Ссылка

#js

Вопросы и ответы для собеседования на позицию frontend-разработчик

В этой статье (части) рассмотрим вопросы, связанные с великим и могучим TypeScript'ом, которые задают на собеседованиях.

Пожалуйста, не заучивайте вопросы, это вредно для вашего здоровья!)

Ссылка

#собеседования

Создание веб-приложения с использованием микрофронтендов и Module Federation

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

В данной статье мы разберём процесс разработки веб-приложения на основе подхода микрофронтендов с использованием технологии Module Federation.

Ссылка

#react

Детальный React. Реконсиляция, рендеры, Fiber, виртуальное дерево

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

Ссылка

#react

Архитектурный паттерн Dependency Injection в React-приложении

В этой статье вам расскажут про Dependency Injection в React-приложении. Рассмотрим, что из себя представляет этот архитектурный паттерн, как мы к нему пришли и какую проблему он решает. На примерах покажу, как внедрить Dependency Injection в ваш проект, какие есть плюсы и минусы.

Ссылка

#статьи

Кастомизируем VS Code для веб-разработки

В статье расскажу, какие настройки и плагины VS Code использует наша команда фронтенда в KTS. Материал может быть полезен для JavaScript- и React-разработчиков, а ещё для тех, кто уже давно пользуется VS Code, но не знает о некоторых полезных плагинах и фичах для повседневного использования.

Ссылка

#статьи

Все про this в JavaScript

this - это выражение языка JavaScript, поведение которого очень похоже на поведение идентификатора, с той лишь разницей, что связать значение с this, мы можем только особой формой вызова normal function.

В этой статье автор подробно расскажет как же работает this в js

Ссылка

#js