🎯 Сегодня покажу вам простой, но мощный приём: как ускорить React-приложение с помощью... — 27 июля 2026 г. в 06:51:19.727
🎯 Сегодня покажу вам простой, но мощный приём: как ускорить React-приложение с помощью мемоизации списков Каждый из нас рендерит списки: товары, заявки, комментарии, юзеров - список бесконечен. И одна из самых частых проблем: каждый элемент списка перерендеривается даже при минимальном изменении родителя. Сегодня разбираем реальный кейс и решение, которое спасает производительность. 🔥 Проблема У нас есть список задач, и при обновлении одной задачи - перерендериваются все элементы списка. Визуально это незаметно, но при больших списках производительность падает. Причина проста: у каждого элемента меняется ссылка на props → компонент считается обновлённым → React перерендеривает его. 💡 Решение: React.memo + useCallback Вот минимальный рабочий пример. Компонент элемента списка const TaskItem = React.memo(function TaskItem({ task, onToggle }) { console.log("Render:", task.title); return ( <div> <input type="checkbox" checked={task.done} onChange={() => onToggle(task.id)} /> {task.title} </div> ); }); Родитель function TaskList() { const [tasks, setTasks] = useState(data); const toggle = useCallback(id => { setTasks(prev => prev.map(t => (t.id === id ? { ...t, done: !t.done } : t)) ); }, []); return tasks.map(task => ( <TaskItem key={task.id} task={task} onToggle={toggle} /> )); } 🚀 Что это даёт? - React.memo не даст компоненту перерендериться без изменения реальных данных. - useCallback создаёт стабильную ссылку на функцию. - Итог: перерендерятся только изменённые элементы, остальное остаётся нетронутым. При 500+ элементах разница ощущается моментально. ✍️ @React_lib