Как избежать лишних ререндеров при работе с React Context

Стандартный хук useContext часто вызывает лишние ререндеры, даже если компоненту нужна лишь часть состояния. Статья показывает, как решить эту проблему, создав собственный легковесный Store и хук с селекторами, похожий на useSelector в Redux.

👉 @sWebDev

Moon Lamps

Интерактивная сцена на Ammo.js.

👉 @sWebDev

Pressure.js

Взаимодействие с интерфейсом часто ограничено простыми кликами. Pressure.js расширяет эти возможности, добавляя поддержку силы нажатия через Force Touch, 3D Touch и Pointer Pressure.

👉 @sWebDev

Композиция хуков

Какие два стандартных хука объединяет в себе useQueryState?

Забыли? Вернитесь к посту от 14.07.2025.

👉 @sWebDev

Какой самый тупой стереотип об айтишниках вы слышали?

👍 — «Вы же программисты, почините мне принтер/телефон/микроволновку».

❤️ — Что мы можем взломать Пентагон за 5 минут с помощью блокнота.

🤔 — Что мы зарабатываем миллионы, просто нажимая на кнопки.

👉 @sWebDev | #юмор

Декларативное управление подписками

Стандартная отписка от Observable в ngOnDestroy громоздка и провоцирует утечки памяти.

Пакет @angular/core/rxjs-interop предлагает более чистое решение. Оператор takeUntilDestroyed декларативно связывает жизненный цикл подписки с жизненным циклом компонента. Подписка автоматически завершится при уничтожении компонента. Важным условием его работы является вызов в инъекционном контексте, например, в конструкторе компонента.

import { Component, inject } from '@angular/core';
import { interval } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-news-feed',
  template: '<p>Последнее обновление: {{ time }}</p>',
  standalone: true,
})
export class NewsFeedComponent {
  time = 0;

  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe(value => {
        this.time = value;
        console.log(`Новое событие: ${value}`);
      });
  }
}

👉 @sWebDev

Pixel notepad

Интерактивный пиксельный блокнот на Draggable.js.

👉 @sWebDev

Какой вывод делаем?

👍 — Что в реальном мире иногда приходится идти на компромиссы.

❤️ — Что самый быстрый способ починить код — это его удалить.

🤔 — Что тимлид — уставший человек, которому нужна помощь и, возможно, отпуск.

👉 @sWebDev | #юмор

Moveable

Наделить DOM-элементы возможностью свободного перемещения и масштабирования вручную является непростой задачей. Библиотека Moveable инкапсулирует данную сложную логику и содержит готовые инструменты для манипуляции объектами в реальном времени. Этот инструмент отлично подходит для создания интерактивных редакторов, настраиваемых дашбордов или любых приложений с drag-and-drop интерфейсом.

👉 @sWebDev

Landing page with GSAP & Tailwind CSS

Анимация элементов на странице на GSAP.

👉 @sWebDev

Как React Fiber улучшает производительность рендеринга

Когда приложение React начинает «тормозить» при больших обновлениях, проблема часто кроется в блокировке основного потока. Статья подробно объясняет, как архитектура React Fiber решает данную проблему. Разбирается, как Fiber позволяет разбивать рендеринг на части и приостанавливать его, чтобы интерфейс оставался отзывчивым. Понимание этого механизма помогает писать более производительный код.

👉 @sWebDev

Metaballs hero section with ThreeJS

Анимация объектов с эффектом магнетизма на Three.js.

👉 @sWebDev

Atropos.js

Интерактивные элементы часто выглядят плоскими и не привлекают внимание. Atropos.js решает эту проблему, создавая трёхмерный параллакс-эффект при наведении курсора. Библиотека помогает добавить глубину карточкам, баннерам и другим блокам, делая интерфейс более живым и запоминающимся.

👉 @sWebDev

Определение типа

Что представляет собой тип ReactElement в контексте React?

Забыли? Вернитесь к посту от 21.07.2025.

👉 @sWebDev

Представьте, что это случилось. На что вы потратите освободившееся время?

👍 — Наконец-то разберу свой бэклог из курсов, книг и собственных проектов.

❤️ — Буду лежать и деградировать с удовольствием.

🤔 — Попробую найти новую работу, которую ИИ пока не заменил.

👉 @sWebDev | #юмор

Отслеживание значения с условием

Базовый хук usePrevious можно уточнить, добавив выборочное сохранение. Такой хук принимает вторым аргументом предикат-функцию, которая решает, нужно ли обновлять "предыдущее" значение.

Внутренний ref хука изменится только при положительном ответе предиката. Это позволяет отслеживать не последнее значение, а последнее, подошедшее под определенное правило.

import { useEffect, useRef } from 'react';

function useConditionalPrevious<T>(
  value: T,
  predicate: (prev: T, current: T) => boolean
) {
  const previousRef = useRef<T>();
  const currentRef = useRef<T>(value);

  useEffect(() => {
    if (predicate(currentRef.current, value)) {
      previousRef.current = currentRef.current;
    }
    currentRef.current = value;
  }, [value, predicate]);

  return previousRef.current;
}

👉 @sWebDev