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

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

Ссылка

#статьи

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

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

Ссылка

#css

React.js: Знакомимся с useReducer, Axios и JSON Server на примере создания инвентарного списка

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

А также между делом мы создадим мок API сервера с помощью JSON Server, будем использовать axios для вызова API и, наконец, воспользуемся хуком useReducer для управления состоянием.

Ссылка

#react

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