Стендап Сьогодні 📢 Канал в Telegram @stendap_sogodni

🤖🚫 AI-free content. This post is 100% written by a human, as is everything on my blog. Enjoy!

15.11.2022

Як підтримувати швидкодію додатків на React

⚛️🚅📝 Зачепив сьогодні тему того, як підтримувати швидкодію додатків, написаних на React.

На мою думку, тут є простий максим: швидкодія забезпечується тим, що якнайменша кількість компонент перемальовується якнайрідше. І також треба розуміти: сам React нічого не робить, щоб обмежити перемальовування вкладених компонент.

Отже, висновок: чим частіше оновлюється той чи інший стан, тим глибше у дереві компонент він має зберігатись. Для більшості станів та дій це цілком не важливо - пишіть так, як зручно. Виправляти треба тоді, коли уповільнення стає помітним. За моїм досвідом, найбільш це критично для вводу з клавіатури: саме тут варто прикладати мемоїзацію як значень, так і компонент.

Мемоїзація взагалі не безплатна, як по швидкості, так і по розумінню, тому я уникаю мемоїзації без приводу. Наприклад: мемоїзацію ламають обʼєкти та масиви, утворені літералами — будь-який літерал створюватиме новий обʼєкт при кожному виконанні, а мемоїзація працює тільки, якщо аргументи не змінюються. Якщо мемоїзації немає, то й проблеми це не ставить. Що добре, тому що літерали у коді скрізь.

Redux вносить другий вимір у рівняння швидкодії. Кожний з селекторів — тобто функцій, які використовуються в хуці useSelector - буде виконаний при кожній зміні стану. Щоб уникнути проблем, варто не привʼязувати селектори до компонент, що можуть повторюватись багато разів.