React Optimization: How and When to Use memo, useCallback, and useMemo
SpaceWeb, a hosting and cloud provider. Cloud servers, ready-made development solutions, DBaaS, S3 storage, and Kubernetes—a ready-made infrastructure for your projects.
👉 https://sweb.ru/cloud/?utm_source=you...
⚡ Get the entire course (22 lessons) at once: https://boosty.to/friendly-frontend/p...
✏️ Optimizing To Do List performance. We'll explore which components should be wrapped in React.memo and which shouldn't. I'll show you how to stabilize the onDeleteAllButtonClick, deleteTask, toggleTaskComplete, and addTask functions using useCallback to avoid unnecessary rerenders. I'll explain when useCallback is really needed in the dependencies array, and when prevState can be used. We'll memoize a filtered list of tasks and the number of completed tasks using useMemo. We'll also explore how memoization works in practice and why React.memo isn't necessary in simple components like NewTaskForm and SearchTaskForm.
❤️ Early access to the video and private chat: https://boosty.to/friendly-frontend
🔴 Timeline:
▶ 00:00 | Introduction
▶ 00:29 | What is rerendering in React
▶ 01:29 | The problem of rerenders
▶ 05:45 | React.memo
▶ 07:25 | useCallback
▶ 10:35 | useMemo
▶ 15:14 | Optimizing the remaining parts of the app
▶ 19:16 | Conclusion
📚 Video Links:
➖ Code at the end of the lesson: https://github.com/aleksanderlamkov/t...
🧑💻 Main Telegram channel:
https://t.me/AleksanderLamkov
💬 Community chat on Telegram (help for beginners):
https://t.me/FriendlyFrontend
🗂️ Free courses on the channel:
🟠 HTML: • HTML курс 2025
🔵 CSS: • CSS курс 2025
🟡 JS: • JavaScript курс 2025
🟢 A11y: • Accessibility курс 2025
🗺 Frontend Roadmap: • Frontend Roadmap 2024 | Что должен учить ф...
⚪️ Layout Masterclass for Beginners: • Адаптивная верстка сайта с нуля для начина...
🔘 Layout Masterclass for Advanced (BEM, SCSS): • Вёрстка сайта с 0 до результата | HTML, БЭ...
⚫️ Front-end coding workshop with JavaScript practice: • Вёрстка сайта с нуля • HTML, SCSS, JS прак...
🔴 Front-end coding workshop using JSX, SCSS, JS, Vite, Minista (SSG), and BEM: https://stepik.org/a/228315
📌 Author:
➖ Personal website: https://aleksanderlamkov.ru/
➖ Telegram: https://t.me/AleksanderLamkov
➖ Boosty: https://boosty.to/friendly-frontend
➖ GetMentor: https://getmentor.dev/mentor/aleksand...
➖ Stepik (paid courses and workshops): https://stepik.org/a/228315
#frontend #frontend #react #reactjs