RxJs для самых маленьких

В этой статье мы подробно рассмотрим такую библиотеку как RxJs. Разберем несколько простых примеров и поймем что такое поточность в программировании.

Ссылка

#статьи

Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS

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

Ссылка

#css

await vs yield на примере Effection 3.0 и React

18 декабря 2023 года вышел релиз Effection 3.0 - типизированная альтернативна async/await на генераторах (Structured Concurrency and Effects for JavaScript).

В статье сравним подходы на генераторах и async/await и расскажу как использовать Effection в React для решения типичных проблем с асинхронным кодом:

- Race condition

- AbortController

- Clean up

- Debounce

Ссылка

#статьи

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

1. Использование React.memo
React.memo используется для предотвращения ненужных повторных рендеров функциональных компонентов, если их пропсы не изменились.

const MyComponent = React.memo(function MyComponent(props) {
  // Component logic
});

2. Правильное использование useMemo и useCallback
Эти хуки помогают предотвратить выполнение тяжелых вычислений или создание функций при каждом рендере.

useMemo мемоизирует значение:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useCallback мемоизирует функцию:

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

3. Разделение кода (Code Splitting)
Разделение кода позволяет загружать только необходимые части приложения. Это можно сделать с помощью React.lazy и Suspense.

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

4. Динамическая загрузка (Dynamic Import)
Позволяет загружать модули по мере необходимости, что уменьшает начальный размер бандла.

import(/* webpackChunkName: "moduleA" */ './moduleA').then(module => {
  // Использование модуля
});

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

// Вместо этого:
<MyComponent onClick={() => doSomething()} />

// Используйте:
const handleClick = useCallback(() => doSomething(), []);
<MyComponent onClick={handleClick} />

6. Оптимизация рендеров с помощью shouldComponentUpdate и PureComponent
Для классовых компонентов можно переопределить shouldComponentUpdate или использовать PureComponent, который автоматически выполняет поверхностное сравнение пропсов и состояния.

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.value}</div>;
  }
}

7. Избегание большого количества состояний и контекста
Старайтесь не создавать много состояний на уровне компонентов. Вместо этого объединяйте связанные состояния в одно, чтобы уменьшить количество рендеров.

const [state, setState] = useState({
  name: '',
  age: 0,
  address: ''
});

// Изменение состояния:
setState(prevState => ({ ...prevState, name: 'John' }));

8. Профилирование и анализ производительности
Используйте инструменты, такие как React Profiler, для анализа производительности вашего приложения и выявления узких мест.

9. Оптимизация загрузки изображений
Загружайте изображения асинхронно и используйте техники, такие как lazy loading для изображений, чтобы не блокировать рендеринг.

10. Использование производительных библиотек и инструментов
Используйте проверенные и оптимизированные библиотеки, такие как react-window или react-virtualized для рендеринга больших списков.

Эти принципы и техники помогут вам создать более производительные и отзывчивые приложения на React.

Решение задач Front End с интервью. Throttle

Задача на реализацию Throttling часто дается на интервью по front end разработке.

Давайте реализуем функцию throttle, которая принимает функцию callback и время ожидания. Вызов throttle() должен возвращать новую функцию, которая будет вызывать внутри себя callback функцию.

Ссылка

#js

Решение задач Front End с интервью. Promise Pool

Разбираем задачу Promise Pool (Leetcode 2636)

Дан массив асинхронных функций functions и максимальный размер пула n. Необходимо написать асинхронную функцию promisePool. Она должна возвращать Promise, который разрешается, когда разрешаются все входные функции function.

Ссылка

#js

JavaScript: структуры данных и алгоритмы. Часть 1

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


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


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

Ссылка

#js

Как узнать количество перерисовок? React Custom Hook: useRenderCount

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

Ссылка

#react

Что такое атрибут key? Для чего он нужен?

Key помогает React определять, какие элементы были изменены, добавлены или удалены. Key нужен для лучшего определения порядка элементов в списке.

Key всегда должен присваивается на верхнем уровне:

Правильно:

const howUseKey = () => {
  const array = [1, 2, 3];
  return (
    <div>
      {array.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
};

Неправильно (Приглядитесь к its a trap):

const howNotUseKey = () => { 
 const array = [1, 2, 3];
  return (
    <div>
      {array.map((item) => (
        <div className="its a trap">
          <div key={item}>{item}</div>
        </div>
      ))}
    </div>
  );
};

Если использовать индекс массива или другие значения которые могут меняться, то мы можем получить неприятные баги. Лучше всего использовать уникальный id объекта.

Более подробно про key можете прочитать здесь