Portals дозволяють рендерити компоненти за межами елемента <div id="root">, що є єдиною перевагою.

Portals автоматично запобігають прокручуванню основного контенту під час активного модального вікна.

Незважаючи на те, що компонент рендериться в іншому DOM-вузлі, обробка подій (Event Bubbling) все одно відбувається через ієрархію React-компонентів, а не через ієрархію DOM, що дозволяє модальному вікну доступ до Context та подій батьківських компонентів.

Portals гарантують, що стилі компонента не будуть успадковані зовнішнім оточенням DOM.

Вони не підтримують медіа-запити.

Генерація та ін'єкція стилів у DOM відбувається під час виконання (runtime), що може блокувати рендеринг.

Вони вимагають обов'язкового використання React.memo.

Надмірна кількість HTTP-запитів.

Автоматично додають префікси постачальників (vendor prefixes).

Дозволяють використовувати JS-змінні всередині CSS-файлів. 

Створюють унікальні, локально обмежені імена класів під час компіляції, запобігаючи колізіям імен глобального простору.

Забезпечують можливість вкладення селекторів (Nesting).

fallback примушує браузер використовувати HTTP/2.

fallback використовується для оптимізації SEO.

Без Suspense, React не знає, що показувати, доки код компонента завантажується, і видасть помилку.

Suspense запобігає завантаженню компонента, доки не будуть виконані всі асинхронні запити.

Коли компонент містить багато дочірніх елементів. 

Коли пропси передаються тільки як примітивні значення (string, number).

Коли витрати на неглибоке порівняння (shallow comparison) пропсів перевищують витрати на сам ре-рендеринг компонента.

Коли компонент використовує багато хуків стану.

React виведе попередження, але логіка працюватиме коректно. 

useCallback автоматично оновлює внутрішню функцію. 

Функція "захопить" (captures) старе значення стану з початкового рендерингу, що призведе до помилок у логіці.

useCallback ігнорує зовнішні залежності

Обгорнути споживача у React.memo (з дефолтним порівнянням).

Перенести логіку оновлення в useCallback у провайдері.

Розділити великий Context на кілька менших Context'ів (наприклад, StateContext та DispatchContext).

Використовувати useReducer без селекторів.

Component використовує React Context, а element – пропси.

Немає відмінності, обидва синтаксиси скасовані та замінені на <Route element={<Component />}>

Component підтримує тільки функціональні компоненти, а element — класові.

element завжди викликає повторне монтування компонента, тоді як Component його кешує.

Zustand використовує Object.freeze() перед кожним оновленням.

Стан завжди зберігається у вигляді масиву, що полегшує імутабельне оновлення.

Zustand використовує неглибоке копіювання (shallow merge) результату, поверненого з функції set, з попереднім станом.

Він примусово вимагає використання immer middleware.

Вбудована підтримка асинхронних сайд-ефектів (наприклад, redux-thunk та redux-saga)

Автоматичне включення Middleware для виявлення мутацій стану та серіалізаційні перевірки

Примусове використання імутабельних структур даних, таких як Immutable.js.

Автоматична інтеграція Redux DevTools