💳 Подборка свежих статей

1️⃣ Кастомизация Keycloak

➡️ Для тех, кто работает с авторизацией. Покажет, почему Freemarker неудобен и как Keycloakify на React/TS упрощает кастомизацию UI.

2️⃣ Бесшовный старт в Angular

➡️ Для фронтендеров на Angular и SPA. Рецепт, как убрать «белый экран» при загрузке и сделать старт плавным.

3️⃣ Отображение четырёхмерного пространства на двухмерную плоскость

➡️ Для любителей графики и математики. Как построить и визуализировать тессеракт в WebGL.

🐸 Библиотека фронтендера

#read_watch #react #angular #js

🌪 useEffect и зависимости

На картинке 3 кейса:

➡️ Забыли проп в deps → эффект не срабатывает при изменении данных

➡️ Положили объект/функцию → эффект запускается каждый ререндер

➡️ Скаляр в deps → всё стабильно, эффект срабатывает ровно при нужном изменении

⌨️ Совет:

— Всегда указывайте все зависимости эффекта

— Если зависимость нестабильна (объект/функция) → мемоизируйте (useMemo, useCallback)

— Примитивы (строка, число) в deps — самый безопасный вариант

🐸 Библиотека фронтендера

#hotfix #react

💖 why-did-you-render: быстрый детектор утечек в React

Подозреваете рост памяти после навигации? Включите детектор «болтливых» ре-рендеров — часто именно они топят heap.

Решение:

npm i -D @welldone-software/why-did-you-render

// src/index.jsx
import React from 'react'
import wdyr from '@welldone-software/why-did-you-render'
wdyr(React, { trackAllPureComponents: true }) // dev only

(точечно: MyWidget.whyDidYouRender = true)

➡️ Что получите:

— Логи в консоли с причинами ре-рендера (diff пропсов/стейта),

— Быстрый поиск «шумных» компонентов: несмемоизированные пропсы, коллбеки без useCallback, эффекты без cleanup.

➡️ Дальше — фиксим: мемоизация, стабилизация пропсов, корректные useEffect cleanups.

🐸 Библиотека фронтендера

#readme #react

🔥 Проп-спрединг без фильтрации

На картинке 3 ситуации:

➡️ Передали ...props в корневой <div> → в DOM улетают лишние атрибуты

➡️ Поймали warning в консоли и начали гадать откуда он

➡️ Правильный вариант → деструктурируем нужные props и явно прокидываем

⌨️ Рекомендации:

— Никогда не спредьте всё подряд в корень

— Лишние атрибуты → лишние баги

— Чётко указывайте только то, что действительно нужно в DOM

🐸 Библиотека фронтендера

#hotfix #react

💳 Подборка свежих статей

1️⃣ $220K в месяц на рендеринге JavaScript

История Prerender — как простой сервис для индексации JS-сайтов вырос в SaaS с органическим ростом и стабильной выручкой.

2️⃣ «Фулстек JavaScript: Секреты для миддлов»

Обзор книги Милесии МакГрегор: переход от middle к senior, работа с legacy, архитектурные решения в NestJS и React, DevOps-подходы и важность soft-skills.

3️⃣ SolidJS под капотом: для React-разработчиков

Перевод статьи о том, как работает реактивная библиотека без виртуального DOM: сигналы, эффекты, прокси-хранилища и ловушки вроде деструктуризации пропсов.

🐸 Библиотека фронтендера

#read_watch #js #react

⚛️ React 19.2 — что нового

Свежий релиз уже на npm.

Главные фишки:

<Activity /> — новый способ управлять частями приложения (видимые/скрытые активности, предзагрузка скрытых страниц).

useEffectEvent — решение для «ивентов» внутри эффектов без лишних перезапусков.

cacheSignal — для React Server Components, помогает правильно завершать кэшированные запросы.

Performance Tracks — новые треки в Chrome DevTools для анализа производительности.

Partial Pre-rendering — частичный пререндеринг: статику можно отдать с CDN, а динамику дорисовать позже.

📌 Плюс: обновлён eslint-plugin-react-hooks v6, поддержка Web Streams в SSR и мелкие багфиксы.

🔗 Подробности — в блоге React

🐸 Библиотека фронтендера

#stack #react