💖 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