Уточнение типов для дочерних элементов

При типизации children в React-компонентах часто используют ReactNode. Данный тип, принимающий JSX, строки, числа и null, достаточно гибкий. Однако для создания более строгого API лучше подходит ReactElement.

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

import { ReactNode, ReactElement } from 'react';

// ReactNode принимает почти любые значения
const FlexibleContainer = ({ children }: { children: ReactNode }) => {
  return <div>{children}</div>;
};

// ReactElement принимает только React-элементы
const StrictContainer = ({ children }: { children: ReactElement }) => {
  return <div>{children}</div>;
};

👉 @sWebDev

Draggable Sidepanel

Перетаскиваемая панель на Draggable.js.

👉 @sWebDev

Когда потратил на кастомные кейкапы больше, чем на курсы.

👍 — Эстетика рабочего пространства важна.

❤️ — Главное чтобы цвет кейкапов совпадал с цветом подсветки на проекторе.

🤔 — Он не бесполезный, он ночью светится.

👉 @sWebDev | #юмор

Es-toolkit

Es-toolkit — утилитарная JavaScript-библиотека, созданная как современная альтернатива Lodash. Содержит набор полезных функций (debounce, chunk, sum и другие), но с фокусом на производительность и малый размер.

👉 @sWebDev

Color Spectrum Layout

Анимация фона с настраиваемым градиентом на GSAP.

👉 @sWebDev

Подводные камни URL Search Params в React

Хранение состояния в URL-параметрах кажется простым решением, но под поверхностью скрывается масса проблем. Статья рассматривает неочевидные сложности: от отсутствия типобезопасности и валидации до управления частотой обновлений и миграции схем.

👉 @sWebDev

Draggable Infinite Slider

Кастомный слайдер на GSAP.

👉 @sWebDev

Swagger UI

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

👉 @sWebDev

Контроль навигации

Какова основная задача гарда CanDeactivateFn?

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

👉 @sWebDev

Что хуже?

👍 — Работать без четкого ТЗ.

🤔 — Работать по четкому ТЗ, которое меняется каждый день.

❤️ — Страшнее всего — работать над проектом, в успех которого не верит никто, включая тебя.

👉 @sWebDev | #юмор

Отложенное выполнение эффектов

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

import { useEffect, useState } from 'react';

const useDebouncedEffect = (effect, deps, delay) => {
  useEffect(() => {
    const handler = setTimeout(() => effect(), delay);
    return () => clearTimeout(handler);
  }, [...(deps || []), delay]);
};

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');

  useDebouncedEffect(() => {
    // Логика отправки запроса на сервер
    console.log(`Отправка запроса: ${searchTerm}`);
  }, [searchTerm], 500);

  return (
    <input
      type="text"
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      placeholder="Поиск..."
    />
  );
}

👉 @sWebDev

Pick a Card

Интерактивная сцена с колодой карт на GSAP и Draggable.js.

👉 @sWebDev

Как вы используете AI-ассистентов в работе?

👍 — Для генерации бойлерплейта и решения типовых задач, но всегда проверяю и рефакторю результат.

❤️ — Копирую промпт из таски в Jira, а потом копирую ответ из ChatGPT в IDE.

🤔 — Как собеседника. Пока формулирую для нейросети четкий вопрос, сам нахожу ответ.

👉 @sWebDev | #юмор

Shine.js

Стандартные тени для текста выглядят статично и не добавляют интерактивности. Библиотека Shine.js оживляет их, создавая динамические тени, которые реагируют на положение курсора или ориентацию устройства.

👉 @sWebDev

Пазл

Реализация интерактивного пазла на GSAP.

👉 @sWebDev

Как избежать лишних ререндеров при работе с 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