React 19: Управління станом з покращеним API контексту

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

Що нового в API контексту React 19?

Ключові покращення в API контексту React 19:

1. Кращі інструменти для налагодження: Покращена підтримка DevTools для перевірки використання контексту та потоків оновлень.
2. <Context.Provider> як провайдер: Чистіший і більш ефективний API для управління контекстом, що полегшує впровадження глобального стану. Тепер ви можете рендерити <Context.Provider> як провайдер замість:
   ```
   const ThemeProvider = ({ children }) => {
   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 (  
   <button onClick={toggleTheme}>  
     Current Theme: {theme} (Click to toggle)  
   </button>  
 );  
};  

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 (  
   <header>  
     React 19 Theme Demo  
   </header>  
 );  
};  
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 (  
   <ThemeProvider>  
     <Header />  
     <ThemeSwitcher />  
     <Footer />  
   </ThemeProvider>  
 );  
};  
export default App;

Коли використовувати Context і коли сторонні бібліотеки

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

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

Розглядайте сторонні бібліотеки, коли:
- Ваш додаток має складні вимоги до стану, такі як глибоко вкладені дані або залежності між різними частинами.
- Вам потрібні розширені функції, такі як налагодження з можливістю подорожі в часі, проміжне програмне забезпечення або функціональність скасування/повторення дій (Redux чудово підходить для цього).
- Виникають проблеми з продуктивністю через занадто багато перерендерів (Zustand або Jotai є легковажними і оптимізованими альтернативами).

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