web обучение онлайн блог

Еволюція State Management в React: від useState до Zustand

Ви клікнули {count} разів

setCount(count + 1)}> Клікнути ); } **Переваги:** * Простота та зрозумілість. * Ідеально для локального стану. **Недоліки:** * Не призначений для передачі даних між віддаленими компонентами. useContext + useReducer: Глобальний стан без бібліотек Коли дані потрібно передавати на кілька рівнів вглиб дерева компонентів, виникає проблема "prop drilling". Щоб уникнути цього, React пропонує комбінацію хуків useContext та useReducer. * **useContext** дозволяє створити "контекст", до якого може підписатися будь-який дочірній компонент, отримуючи дані напряму, минаючи проміжні компоненти. * **useReducer** є альтернативою useState для складнішої логіки стану, що нагадує патерн Redux (action, reducer). **Приклад коду:** перемикач теми (світла/темна). import React, { createContext, useContext, useReducer } from 'react'; // 1. Створюємо контекст const ThemeContext = createContext(); // 2. Описуємо логіку редюсера const themeReducer = (state, action) => { switch (action.type) { case 'TOGGLE_THEME': return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' }; default: return state; } }; // 3. Створюємо провайдер, який огортає наш додаток export function ThemeProvider({ children }) { const [state, dispatch] = useReducer(themeReducer, { theme: 'light' }); return ( {children} ); } // 4. Створюємо кастомний хук для зручного доступу до контексту export function useTheme() { return useContext(ThemeContext); } // Використання в компоненті: function ThemeToggleButton() { const { state, dispatch } = useTheme(); return ( dispatch({ type: 'TOGGLE_THEME' })}> Перемкнути на {state.theme === 'light' ? 'темну' : 'світлу'} тему ) } **Переваги:** * Рішення "з коробки", не потребує додаткових бібліотек. * Вирішує проблему "prop drilling". **Недоліки:** * Може спричиняти зайві ре-рендери компонентів, що підписані на контекст. * Для дуже складних станів може стати громіздким. Класичний підхід: Redux та Redux Toolkit Redux роками був де-факто стандартом для управління станом у великих React-додатках. Він пропонує централізоване сховище (store) для всього стану додатка та чіткі правила для його оновлення. "Бойлерплейт" та народження Redux Toolkit Класичний Redux критикували за велику кількість "бойлерплейту" — шаблонного коду (actions, action creators, reducers, constants), який потрібно було писати для реалізації навіть простої логіки. На щастя, команда Redux створила **Redux Toolkit (RTK)** — офіційний, рекомендований спосіб роботи з Redux. RTK значно спрощує написання коду та включає найкращі практики за замовчуванням. **Приклад коду:** той самий лічильник, але з RTK. import { configureStore, createSlice } from '@reduxjs/toolkit'; import { useSelector, useDispatch } from 'react-redux'; // 1. Створюємо "slice" (шматочок) стану const counterSlice = createSlice({ name: 'counter', initialState: { value: 0 }, reducers: { increment: (state) => { state.value += 1; // RTK використовує Immer, тому ми можемо "мутувати" стан }, decrement: (state) => { state.value -= 1; }, }, }); // Експортуємо actions export const { increment, decrement } = counterSlice.actions; // 2. Створюємо store export const store = configureStore({ reducer: { counter: counterSlice.reducer, }, }); // 3. Використання в компоненті function ReduxCounter() { const count = useSelector((state) => state.counter.value); const dispatch = useDispatch(); return (

Значення лічильника: {count}

Еволюція State Management в React: від useState до Zustand

Асинхронний JavaScript: Глибоке занурення в async/await

End-to-End Type Safety: Building Bulletproof APIs with FastAPI and TypeScript

From Chaos to Clarity: Refactoring with the Strategy Design Pattern

Майстерність React хука useEffect: від основ до просунутих технік