Как заменить useState на useRef и выиграть в производительност | Заметки про React

Как заменить useState на useRef и выиграть в производительности

Основной способ вызвать ререндер компонентов в React заключается в изменении стейта. Использование стейта в компонентах – это безопасный вариант работы с динамическими значениями: мы всегда будем уверены, что при изменении стейта произойдет ререндер компонента.

Не всегда использование стейта целесообразно, бывают случаи, когда от него можно отказаться. Правда, иногда при отказе от стейта, можно выстрелить себе в ногу, но если сделать все правильно, то можно увеличить производительность приложения.

Стейт обязательно нужно использовать в двух случаях: когда стейт влияет на DOM, участвуя в рендере компонента, и когда необходимо вызывать эффект useEffect.

Ситуации, когда стейт можно не использовать:
- Если значения нужны только в коллбэках, то используйте рефы.
- Буферизация изменений стейта. Если колбек вызывается слишком часто и в нем происходит изменение стейта, то возможно будет эффективнее запланировать изменение стейта используя requestAnimationFrame.
- Императивное изменение DOM узла. Например, если реализуется анимация, то гораздо эффективнее напрямую изменять стили DOM узла. Если для анимации использовать стейт, то потребуется очень много ререндеров компонента, что повлияет на производительность.

https://thoughtspile.github.io/2021/10/18/non-react-state/