Understanding Props vs State in React Components

𝗕𝘂𝗶𝗹𝘁 𝗮 𝗣𝗿𝗼𝗱𝘂𝗰𝘁𝘀 𝗨𝗜 𝘂𝘀𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁! 𝗧𝗼𝗱𝗮𝘆 𝗜 𝗽𝗿𝗮𝗰𝘁𝗶𝗰𝗲𝗱 𝗥𝗲𝗮𝗰𝘁.𝗷𝘀 𝗯𝘆 𝗰𝗿𝗲𝗮𝘁𝗶𝗻𝗴 𝗮 𝘀𝗶𝗺𝗽𝗹𝗲 𝗣𝗿𝗼𝗱𝘂𝗰𝘁𝘀 𝗟𝗶𝘀𝘁𝗶𝗻𝗴 𝗜𝗻𝘁𝗲𝗿𝗳𝗮𝗰𝗲.  𝗙𝗲𝘁𝗰𝗵𝗲𝗱 𝗽𝗿𝗼𝗱𝘂𝗰𝘁 𝗱𝗮𝘁𝗮 𝗮𝗻𝗱 𝗱𝗶𝘀𝗽𝗹𝗮𝘆𝗲𝗱 𝗶𝘁 𝘂𝘀𝗶𝗻𝗴 𝗿𝗲𝘂𝘀𝗮𝗯𝗹𝗲 𝗥𝗲𝗮𝗰𝘁 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 𝗜𝗻𝗰𝘁𝗿𝘂𝗰𝘁𝗼𝗿 Sheryians Coding School Devendra Dhote Daneshwar Verma Tanishq Sonwane Ritik Rajput Satwik Raj MOHD ALI ANSARI Sarthak Sharma Harsh Vandana Sharma Ankur Prajapati GitHub : https://lnkd.in/ga9UeC7H Live Link : https://lnkd.in/g-AEB6Ea Rendering product cards dynamically Displaying image, name, price, and category Implementing a remove button Practicing component-based UI React makes it much easier to manage dynamic UI and reusable components. Excited to keep building more projects! 🔥 #ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #CodingJourney #ReactLearning #100DaysOfCode

🚀 Understanding the React Component Lifecycle with Hooks When I first started learning React, one thing confused me a lot: When exactly do hooks run? Sometimes my useEffect ran twice. Sometimes state updates caused unexpected re-renders. And debugging it felt like chasing a ghost in the code. 😅 After spending time digging into it, I realized something simple: React components basically go through three main phases. 1️⃣ Mounting – The component is created This is when the component first appears on the screen. During this phase: useState initializes state useContext reads context useEffect([]) runs once after the first render 2️⃣ Updating – The component re-renders This happens whenever something changes. For example: State changes Props change Context changes React re-renders the component and then runs: useEffect([dependency]) only if the dependency changed. 3️⃣ Unmounting – The component is removed When a component disappears from the UI. This is where cleanup functions become important. Example: Remove event listeners Cancel API requests Clear intervals That’s why useEffect can return a cleanup function. 💡 One small insight that helped me: Think of React components like a life cycle: Born → Update → Die Once this mental model clicks, hooks become much easier to understand. I made this visual guide to simplify the concept 👇 💬 Curious to know: When learning React, which hook confused you the most? useEffect useState useContext Something else? Let’s discuss in the comments 👇 🔖 Save this post if you're learning React. 🔁 Share it with someone who is starting their React journey. #react #reactjs #javascript #webdevelopment #frontenddevelopment #coding #softwaredevelopment #programming

Day 25 / 60 : ✅ JavaScript Deep Dives, React, and Ultra Learning. 📚☕ Some days are for coding. Today was for understanding. This morning was all about revisiting JavaScript Scopes. It’s amazing how much clarity you gain by reviewing the fundamentals—execution context, closures, and where our variables actually live. By the afternoon, I switched gears to React (JSX & Props) to keep the momentum going with the framework. To balance the technical deep dive, I read two chapters of Scott H. Young’s Ultra Learning and squeezed in some typing drills. Metalessons + Mechanics = Progress. 🚀 Halfway there. Let’s keep pushing. ⚙️ #JavaScript #ReactJS #UltraLearning #WebDevelopment #60DaysOfCode #CodingJourney

🚀 Learning Update | JavaScript, React & Consistency Here’s what I worked on recently: 🔹 JavaScript Fundamentals Implemented 5 practical examples to strengthen understanding of closures. 🔹 OOP in JavaScript Created a class with constructor and methods, and extended it into a subclass to understand inheritance. 🔹 DSA Practice Solved 4 LeetCode problems to improve problem-solving skills 💪 🔹 React Development Built a React-based form page and understood the advantages of using type="submit" for better form handling. 🔹 Node.js Practice Completed 5 Node.js challenges on HackerRank, improving backend fundamentals. 🔹 Communication Improvement Continued reading The Power of Subconscious Mind to enhance communication 🧠 Small, consistent efforts are building strong foundations. #JavaScript #ReactJS #NodeJS #DSA #LearningInPublic #GrowthMindset

Learning React without JavaScript is like reading a novel in a language you don’t understand. You can see the words. You can even repeat the sentences. But you don’t truly understand what’s happening. That’s exactly what happens when you jump straight into React 👇 • You use hooks, but don’t understand closures • You manage state, but don’t know how JS works behind it • You copy code, but can’t debug when it breaks At that point, you’re not coding — you’re just memorizing patterns. React is not magic. It’s just JavaScript… with structure. If your JavaScript is weak, React will feel confusing. If your JavaScript is strong, React will feel simple. So don’t rush. Master JavaScript first. React will follow naturally. #javascript #reactjs #webdevelopment #frontend #programming #coding #softwaredeveloper #100daysofcode #learninpublic

State vs Props in React Simplified: If you're learning React, this is one of the most important concepts to understand 1. State: Managed inside the component Can be updated (mutable) Used for dynamic data (like counters, inputs) 2. Props: Passed from parent to child Read-only (immutable) Used to share data between components In short: State = “owned data” Props = “received data” Understanding this difference helps you write cleaner and more predictable React code. What confused you more when learning React: State or Props? #React #JavaScript #WebDevelopment #Frontend #Coding #100DaysOfCode

I’m starting something new today. For the next few weeks, I’m going to learn JavaScript seriously and I’ll be documenting the entire journey here on LinkedIn. No skipping concepts. No pretending I know things I don’t. Just learning step by step and sharing what I understand each day. Why am I doing this publicly? Because learning in public keeps you accountable. And sometimes the best way to understand something is to explain it to others. Starting from the basics: → JavaScript fundamentals → Variables, functions, loops → DOM manipulation → APIs and async JavaScript → and eventually moving towards React Every day I’ll post one concept I learned, explained in simple terms. If you’re also learning JavaScript or you already work with it feel free to follow along, share advice, or correct me when I’m wrong. Let’s build and learn together. Day 1 starts tomorrow. #LearningInPublic #JavaScript #WebDevelopment #100DaysOfCode #Frontend #Coding

📚 New article just published on SYUTHD! 🔖 Beyond Components: Mastering Agentic UI Patterns in Next.js 16 and AI-Native Frameworks 🏷️ Category: JavaScript Frameworks 📖 Full article → https://lnkd.in/gtGgztJh 👉 Follow our page for more tech tutorials: https://lnkd.in/gsJDptPM 💬 Telegram: https://t.me/nisethtechno 👍 Facebook: https://lnkd.in/gsKv3Dyn #JavaScriptFrameworks #Tech #Tutorial #Programming #TechBlog #2026

🚀 Day 17/21 – JavaScript Deep Dive Today I explored what really happens behind the scenes in JavaScript 🧠 ✨ Topics Covered: • Closures • Destructuring • Event Loop • Synchronous vs Asynchronous JS Understanding these concepts changed the way I see JavaScript execution 💡 It’s not just code… it’s how the engine thinks! Sheryians Coding School Sheryians Coding School Community Ritik Rajput Daneshwar Verma #JavaScript #WebDevelopment #CodingJourney #21DaysOfCode #Learning #Developers #Frontend

🚀 Day 28 of My JavaScript Learning Journey Today I learned about the Event Emitter pattern in JavaScript ⚡ An Event Emitter allows us to create, listen, and trigger custom events. This pattern is widely used in real-world applications like Node.js and frontend frameworks. It helps in building loosely coupled and scalable systems. ✨ What I learned today: ✅ Understanding Event-Driven Programming ✅ Creating custom events ✅ Subscribing using on() ✅ Triggering events using emit() Event Emitters are powerful for building modular and scalable applications 🚀 #Day28 #JavaScript #EventEmitter #WebDevelopment #CodingJourney #LearningInPublic #coddy #100DaysOfCode #Developers