React PropTypes: Ensuring Correct Prop Types

🚀 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

Most tutorials teach you what to build. Today I finally understood how things actually work under the hood. Day 4 of my React learning journey 🚀 Here’s what I worked on: • Built Create & Read functionality from scratch • Split logic into two separate components (cleaner + reusable) • Learned how to use React Hook Form • Understood how forms are managed efficiently using hooks Key insight: Handling forms in React doesn’t have to be messy. With the right approach (and tools like React Hook Form), you stop fighting state management… and start controlling it. Real moment: At first, managing inputs and state felt confusing — too many moving parts. But once I connected how hooks simplify the flow, everything started making sense. That shift from confusion → clarity was the real win today. Still early in the journey, but now I can see how real-world apps handle user data step by step. Building slowly. Understanding deeply. Devendra Dhote Sheryians Coding School #ReactJS #WebDevelopment #JavaScript #LearningInPublic #FrontendDev

React Learning Series | Day 10 – Forms in React (Controlled Components) ->In React, forms are used to collect user input such as text, email, and passwords. ->React uses controlled components, where form data is managed using state. ->This gives full control over input values and behavior. Example: import { useState } from "react"; function Form() { const [name, setName] = useState(""); return ( <div> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> <p>Hello, {name}</p> </div> ); } Explanation: --useState stores input value --onChange updates state --UI updates automatically when user types Why Forms are Important: ✔ Handle user input ✔ Build interactive applications ✔ Enable validation and data control --->Controlled components make form handling predictable and efficient in React. 📌 Day 10 of my React Learning Series #ReactJS #ReactDeveloper #FrontendDevelopment #WebDevelopment #JavaScript #CodingJourney #LearningInPublic #DeveloperJourney #TechLearning #LinkedInSeries 🚀

I started learning React. And I already made a decision most beginners don't make until month 3. I'm not going to wait until I "know enough" to build something. I'm going to build while I learn. Here's my thinking 👇 Every React resource says: "Learn the fundamentals first." But no one tells you when "enough fundamentals" actually is. So beginners keep watching. Keep taking notes. Keep waiting for the perfect moment to start building. That moment never comes. The only way to make things click: → Components make sense when you're building real sections → Props make sense when you're passing your own data → State makes sense when you see it change on screen → Hooks make sense when they solve your actual problem Theory without application just fades. So starting today — I'm learning React by building my portfolio. Not a tutorial clone. My own thing. It'll be messy. That's fine. Messy and real beats clean and imaginary. If you're also learning React (or any framework): What's the first real thing you built? I'd love to know. #ReactJS #JavaScript #LearningInPublic #BuildInPublic #WebDevelopment #FrontendDevelopment #LearnToCode #CodingJourney

𝐃𝐚𝐲 𝟑 𝐨𝐟 𝐥𝐞𝐚𝐫𝐧𝐢𝐧𝐠 𝐫𝐞𝐚𝐜𝐭 Recently, I’ve been learning about 𝐑𝐞𝐚𝐜𝐭 𝐇𝐨𝐨𝐤𝐬, and it’s been a game changer for how I understand React. Hooks allow us to use React features inside functional components no need for class components. Here are three important hooks I’ve learned so far: - 𝐮𝐬𝐞𝐒𝐭𝐚𝐭𝐞() This is used to manage state (data) inside a component. Think of it as a way to store values that can change over time and when they change, React automatically updates the UI. Example: toggling a password field, updating form inputs, counters, etc. - 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭() This hook runs code after a component renders (either when it is created or updated). It takes two parameters: 𝟏) A function (what should run) 𝟮) A dependency array (controls when it runs) - If the dependency array is empty [] it runs only once (when the component is created) - If it has values, it runs whenever those values change This is useful for things like fetching data, running side effects, or reacting to changes in state. - 𝘂𝘀𝗲𝗥𝗲𝗳() This is used to directly access or reference a DOM element without manually selecting it. Instead of using methods like document.querySelector, React provides useRef to safely interact with elements. It can also store values without causing a re-render. Still learning and building, taking it one concept at a time #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #ReactHooks #LearnInPublic #CodingJourney #TechJourney

Day 2 of learning React Today I explored one of the most important concepts in React State. State is simply data that is tied to your UI. When the state changes, React automatically updates the HTML (UI) to reflect the new data. This is what makes React powerful and dynamic. To manage state, we use useState(). Example: const [count, setCount] = useState(0); count - the current state (data) setCount - the function used to update that state A Bug I Encountered (and what I learned) While learning, I ran into an issue where I updated the state twice in the same function, but the second update overwrote the first. Example of the problem: setCount(count + 1); setCount(count + 1); You might expect the value to increase by 2, but it only increases by 1. Why? State updates in React are asynchronous they don’t happen immediately. React waits until all the code finishes running before applying updates. Solution (Using a variable or functional update) const newCount = count + 1; setCount(newCount); setCount(newCount + 1); New Concepts I Learned Lifting State Up (Definition): This is the process of moving state from a child component to a parent component so that multiple components can share and use the same data. Controlled Input (Definition): A controlled input is an input field whose value is controlled by React state. This means the input value is always in sync with the state. Example: const [value, setValue] = useState(''); <input value={value} onChange={(e) => setValue(e.target.value)} /> React is starting to make more sense now, especially how data flows and updates the UI. It’s not always easy, but each challenge is helping me understand things deeper. Looking forward to Day 3 💪 #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #CodingJourney #100DaysOfCode #BuildInPublic

🚀 React Learning Journey (Day Update) Today I spent time understanding the core fundamentals of React — trying to build a strong base before jumping into advanced topics. Here’s a quick summary of what I explored 👇 What is React?:- A JavaScript library for building UI using reusable components. Components:- Break the UI into small reusable pieces. function Welcome() { return <h1>Hello React</h1>}; JSX & Rules:- Write HTML inside JavaScript (with some rules like className, single parent, etc.) <h1 className="title">Hello</h1> Props (Data Passing):- Send data from parent to child component. function User({ name }) { return <h2>{name}</h2>}; Conditional Rendering:- Show UI based on conditions. {isLoggedIn ? <p>Welcome</p> : <p>Login</p>}; Looping Data (map):- Render lists dynamically from arrays or objects. {items.map(item => <p key={item.id}>{item.name}</p>)}; Small concepts individually, but together they form the foundation of building real-world React applications. Still learning, still building. 🚀 #ReactJS #JavaScript #WebDevelopment #LearningJourney

Day 10 of Learning React — Deep Dive into useEffect & useLayoutEffect Today was not about writing code… it was about understanding how React actually thinks 🧠 Here’s what I explored 👇 🔹 useEffect Basics Used for handling side effects (API calls, subscriptions, DOM updates) Runs after render 🔹 Dependency Array (Most Important Concept ⚠️) [] → Runs only once (Mount) [state] → Runs on state change (Update) No array → Runs on every render (⚠️ Dangerous if misused) 🔹 Component Lifecycle (Simplified React Way) Mount → Component created Update → State/props change Unmount → Cleanup (very important for memory leaks) 🔹 Cleanup Function Prevents memory leaks Example: removing event listeners, clearing intervals 🔹 useLayoutEffect vs useEffect useEffect → Runs after paint (async, non-blocking) useLayoutEffect → Runs before paint (sync, blocks UI) 👉 Use useLayoutEffect only when you need DOM measurements or avoid flickering 🔹 Practical Learning Fetched data using API (axios) Managed state updates Understood render cycles 💡 Key Realization: React is not about components… it’s about managing side effects correctly If you misuse useEffect, your app may: ❌ Re-render infinitely ❌ Cause performance issues ❌ Create memory leaks 🔥 Still learning, still building. Next goal: Mastering state management & optimization #React #WebDevelopment #MERN #FrontendDevelopment #LearningInPublic #JavaScript #Developers

🚀 Day 9 of My React Learning Journey Today things got serious. I didn’t just learn Context API… I went deep into how it actually works. --- 💥 The moment it clicked: Props drilling is not just annoying… It’s a scaling problem. And today I finally understood: 👉 How React lets you share data without passing it everywhere --- 🧠 What I learned (real understanding): • How to create context • How to provide data globally • How components can consume data directly • Why this approach makes apps cleaner & scalable --- ⚙️ The shift in my thinking: Before: → “Pass data step by step” Now: → “Make data available where it’s needed” --- 🔥 But here’s the truth most tutorials won’t tell you: Context API is not just a feature… It’s the beginning of understanding state architecture. --- 📈 Why this matters: This is where you stop being a beginner and start thinking like someone who can build real applications --- 🚧 This is just the beginning… Next, I want to: • Build a project using Context API • Understand performance implications • Learn when NOT to use it --- 💡 Every day I’m moving from: Learning React → Thinking in systems If you’re also on this journey or building something meaningful, let’s connect 🤝 Devendra Dhote Sheryians Coding School #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #100DaysOfCode

🚀 Day 16 of My JavaScript Journey Today was a powerful learning day 💻🔥 I explored some core JavaScript concepts that are extremely important for real-world applications. ✨ Topics I Covered: 🔹 Synchronous vs Asynchronous code 🔹 How the JavaScript Event Loop works 🔁 🔹 Why Callback Hell is a problem 😵 🔹 Creating Promises using "resolve" and "reject" 🤝 🔹 ".then()", ".catch()", ".finally()" methods 🔹 Sequential vs Parallel Promise execution ⚡ 🔹 Comparison of Promise utility methods 🔹 Real-world example: Food Delivery App (Zomato Clone 🍔) 🔹 API fetching using Promises 🌐 🔹 Error handling patterns 🚨 💡 Key Learning: Understanding asynchronous JavaScript is a game-changer 💯 Concepts like the Event Loop and Promises help write cleaner, more efficient, and scalable code. 🍽️ The food delivery app example helped me understand how multiple tasks like ordering, payment, and delivery can run efficiently using async concepts. 🔥 Growing step by step every day! Consistency is the key 🔑 #JavaScript #WebDevelopment #CodingJourney #DaysOfCode #AsyncJS #Promises #Learning #DeveloperLife