S06 L05 React Component State (Why Re-rendering Matters)

📘 REACT COMPONENT STATE — WHY RE-RENDERING MATTERS In this lesson, we introduce React component state as data tied to a component’s rendered output. Using the button example, you’ll see why updating a normal variable is not enough for UI updates, and why React needs state-aware change tracking. 🎯 IN THIS VIDEO Understand component state as UI-driving component data Display JavaScript expressions inside JSX with curly braces Render strings, numbers, and variables in JSX content Use template strings to build dynamic button labels Track click counts with a plain counter variable Attach click handlers and update values on user interaction Debug click behavior and variable changes in DevTools Observe why UI does not re-render when React state is not used 🚀 HOW TO USE THIS COURSE This lesson gives the key mental model for React interactivity: state changes trigger re-renders. It sets up the next step, where you’ll replace plain variables with useState to make the UI update correctly. 👉 Course Website: www.richardbraycourses.co.uk 👉 Course Repositories: www.github.com/RichardBrayCourses 👉 Full course playlist: https://youtube.com/playlist?list=PLNlOxdq7xu14b5ewH4IJC9tMinkgZBuVR&si=Pg8pEDR5UUbQstz6 📂 SECTION REPOSITORY Section 6 repository: https://github.com/RichardBrayCourses/frontend06-react 💡 NOTE If a value changes but the UI does not, first check whether that value is managed as React state rather than a regular local variable.