React Design Patterns || Controlled & Uncontrolled Forms || Day 02

Video Description

Welcome to Day 02 of React Design Patterns! In this session, we delve into one of the most important concepts every React developer must master: Controlled vs. Uncontrolled Components. Along the way, we’ll also break down the differences between state and refs, how React treats them, and when to use one over the other. ⚡ What’s inside this video: ✅ State vs Refs — key differences (and why it matters) ✅ State as the single source of truth in React ✅ Practical usages of useRef (beyond just DOM access) ✅ How refs persist between renders without triggering re-renders ✅ Building a messy form to fix it with a controlled component ✅ When to combine refs with state for optimal patterns ✅ Creating uncontrolled components without boilerplate ✅ Real-world use cases for each pattern ✅ A quick look into React 19’s new forms ✅ Your coding task for practice This isn’t just theory — we’ll refactor real code together so you can see the impact immediately. Timecodes 0:00 - Day 02 00:42 - What Will We Learn? 01:54 - Prerequisites 02:22 - State vs Refs 05:34 - State as Source of Truth 10:05 - Refs Usages 12:19 - Ref for DOM 16:26 - State, Refs, and Rerendering 22:51 - A Messy Feedback Form 27:46 - Controlled Component 35:14 - When Ref Needed With State 38:17 - Uncontrolled Component 40:39 - Use Cases 44:03 - React 19 Forms 45:07 - Task 📌 Subscribe & hit the bell so you don’t miss the upcoming episodes in this 15-day journey. - ⭐ Subscribe: https://www.youtube.com/tapasadhikary - ⭐ Join: https://www.youtube.com/channel/UCaYr5yxgOyk599Mnb3TGh-g/join 💡 If you enjoyed this, check out my other popular series: 40 Days of JavaScript ✅ Start 40 Days of JavaScript: - https://youtu.be/t8QXF85YovE?si=r9sGtJZPtgBl2V27 ✅ Here is another JavaScript Learning Path I recommend: - https://scrimba.com/t0js?via=tapascript ✅ Download the 40 Days of JavaScript Tracker Template: - Link to the template: https://topmate.io/tapasadhikary/382755 ## Important Links - Join My Discord: https://discord.gg/ux9BchWEW3 - Follow tapaScript on GitHub: https://github.com/tapascript - Download the Template: https://topmate.io/tapasadhikary/1737706 - Fake API Repo: https://github.com/tapascript/fake-apis - Source Code Used: https://github.com/tapascript/15-days-of-react-design-patterns - Code in React 19 Repo: https://github.com/atapas/code-in-react-19 ## Prerequisite Videos - useState: https://youtu.be/IQjB-U9X680?si=qwBdsTBxkAnewcY6 - JS Objects: https://www.youtube.com/watch?v=c5vEfYj5yZM - React 19 Playlist: https://www.youtube.com/watch?v=hiiGUjEkzbM&list=PLIJrr73KDmRw-T8bdJn3XxVMbH-zlooKb ## 👋 Like my work? Thank You! - Join as a Member: https://www.youtube.com/channel/UCaYr5yxgOyk599Mnb3TGh-g/join - Sponsor Me: https://github.com/sponsors/atapas - Sponsor my Blog: https://blog.greenroots.info/sponsor ## 🤝 My Links: - Blog: https://blog.greenroots.info/ - Follow on X(Twitter): https://twitter.com/tapasadhikary - Connect on LinkedIn: https://www.linkedin.com/in/tapasadhikary/ - Follow My Work on GitHub: https://github.com/atapas ## About Me: Tapas Adhikary is an Educator at tapaScript, a Tech enthusiast, Writer, YouTuber, and maintainer/contributor of open-source projects. He is a full-stack developer with vast experience building SaaS solutions. He is the founder of the ReactPlay platform, which is driven by open-source projects and a fast-growing community. You can find more about him at https://tapasadhikary.com & https://tapascript.io #reactjs #designpatterns #reactcourse #learnreact