✈️ React 19: 🌿 Керування станом з покращеним Context API 💒

З виходом React 19, API Context отримав покращення, які зробили його більш продуктивним і зручним для розробників, зменшуючи необхідність у використанні зовнішніх бібліотек для керування станом у багатьох випадках.

Що нового в API Context React 19?

Основні покращення в API Context React 19:

1. Кращі інструменти для налагодження: Покращена підтримка DevTools для перевірки використання контексту та потоків оновлень.

1. **як провайдер:** Чистіший і більш ефективний API для керування контекстом, що робить реалізацію глобального стану ще простішою. Тепер можна рендерити як провайдер замість такого коду:

const [theme, setTheme] = useState('light');  
const toggleTheme = () => {  
 setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));  
};  
return {children};  
};  
export { ThemeContext, ThemeProvider };

1. Споживання контексту

Тепер ми використовуємо новий хук use, замість синтаксису useContext

ThemeSwitcher.tsx:

import React, { use } from 'react';  
import { ThemeContext } from './ThemeContext';  

const ThemeSwitcher = () => {  
 const context = use(ThemeContext);  
 if (!context) {  
 throw new Error('ThemeSwitcher must be used within a ThemeProvider');  
 }  
 const { theme, toggleTheme } = context;  
 console.log('ThemeSwitcher re-rendered', theme); // Для спостереження за повторними рендерингами  
 return (  

 Поточна тема: {theme} (Натисніть для перемикання)  

 );  
};  
export default ThemeSwitcher;

Header.tsx

import React, { use } from 'react';  
import { ThemeContext } from './ThemeContext';  

const Header = () => {  
 const context = use(ThemeContext);  
 if (!context) {  
 throw new Error('Header must be used within a ThemeProvider');  
 }  
 const { theme } = context;  
 console.log('Header re-rendered'); // Для спостереження за повторними рендерингами  
 return (  

    Демонстрація теми React 19    
    );  
};  
export default Header;

MainApp.tsx

import React from 'react';  
import './style.css';  
import { ThemeProvider } from './ThemeContext';  
import Header from './Header.jsx';  
import ThemeSwitcher from './ThemeSwitcher.jsx';  
import Footer from './Footer';  

const App = () => {  
 return (        
 );  
};  
export default App;

Коли використовувати Context замість...

Зовнішні бібліотеки

Хоча покращене API Context у React 19 є потужним, це не завжди найкращий вибір для керування станом.

Використовуйте Context API, коли:

• Ваш додаток потребує глобального стану, але має відносно невелику або середню складність.
• Оновлення стану локалізовані і не впливають на багато компонентів.
• Ви хочете уникнути додавання зовнішніх залежностей, таких як Redux.

Розгляньте використання зовнішніх бібліотек, коли:

• Ваш додаток має складні вимоги до стану, наприклад, глибоко вкладені дані або залежності між різними частинами стану.
• Вам потрібні розширені функції, такі як відлагодження з можливістю переміщення в часі (time-travel debugging), проміжне ПЗ (middleware) або функціонал скасування/повторення (Redux відмінно підходить для цього).
• Виникають проблеми з продуктивністю через занадто багато повторних рендерів (Zustand або Jotai є легкими та оптимізованими альтернативами).

Перекладено з: ✈️ React 19: 🌿 State Management with Improved Context API 💒