React State Management and Lifting State Up

𝐃𝐚𝐲 𝟑 𝐨𝐟 𝐥𝐞𝐚𝐫𝐧𝐢𝐧𝐠 𝐫𝐞𝐚𝐜𝐭 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

🚀 Today’s Learning Update (JavaScript Fundamentals) Time: 3:00 PM – 4:00 PM Topic: Variables, Data Types, Operators, Conditional Statements, Ternary Operator, Unary Operator, Loops, Functions 🧠 What I focused on today I studied and revised the core JavaScript fundamentals with a clear approach: 👉 What is it? 👉 Why is it used? 👉 How does it work? 🟢 Variables What: Stores data in memory Why: To reuse and manage data How: Assigns a name to a value stored in memory 🟡 Data Types What: Types of data (String, Number, Boolean, etc.) Why: To define correct form of data How: JS identifies or assigns type automatically 🟠 Operators What: Symbols like +, -, == used for operations Why: For calculations and comparisons How: Takes values → performs operation → returns result 🔵 Conditional Statements What: Decision-making in code (if-else) Why: To control program flow How: Condition checked → true/false → block executes 🟣 Ternary Operator What: Short form of if-else Why: Write clean and short code How: condition ? value1 : value2 🟣 Unary Operator What: Works on single value (++, --, typeof) Why: For increment, decrement, and type checking How: Directly modifies or evaluates a single value 🟤 Loops What: Repeats code multiple times Why: To avoid repetition and automate tasks How: Runs until condition becomes false 🟢 Functions What: Reusable block of code Why: To avoid repetition and make code clean How: Define once → use multiple times 💡 Key Learning These are not just topics — they are the foundation of JavaScript. 👉 Without understanding these: You cannot solve coding problems You cannot learn DSA You cannot build real projects This is the base of programming, and I am focusing on building it strong before moving to advanced DSA and development. #JavaScript #WebDevelopment #FrontendDevelopment #LearningJourney #Consistency #ProgrammingBasics #DeveloperMindset

🚀 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

Day 17 of my learning journey – Closures in JavaScript I used to think functions were simple. You call them… they run… they finish… and that’s it. But one day, something strange happened. I wrote a function inside another function. The outer function finished execution. Done. Gone. Yet somehow… the inner function still remembered everything from the outer function. That felt impossible. How can something remember data from a function that no longer exists? That’s when I met Closures. Imagine this. A mother (outer function) prepares a lunchbox for her child (inner function). Then she leaves. But the child still carries the lunchbox wherever they go. Even though the mother is no longer there, the child still has access to everything she packed. That “lunchbox” is what we call a closure. In JavaScript terms: A closure is created when a function “remembers” the variables from its lexical scope even after the outer function has finished executing. Example: function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const counter = outer(); counter(); // 1 counter(); // 2 counter(); // 3 Here’s the magic: Even though outer() is done executing, the variable count is still alive. Why? Because the inner function has formed a closure around it. Why are closures powerful? They help create private variables They are the backbone of data encapsulation They are used in callbacks, event handlers, and async code They make concepts like currying and memoization possible But here’s the catch: With great power comes great responsibility. Closures can also lead to memory issues if not handled carefully, because they keep references alive longer than expected. Day 17 takeaway: Closures are not just a concept. They are JavaScript’s way of remembering. And once you understand them, you start writing smarter, more controlled code. On to Day 18. #Day17 #JavaScript #FrontendDeveloper #Closures #CodingJourney #100DaysOfCode #LearnInPublic #WebDevelopment #ContinueousLearner

React Learning Progress – Phase 4 Today I completed Phase 4 (Pages 1–6) of my React learning journey, focusing on building a strong foundation of core concepts. Here’s what I covered: • Props and Component Reusability – Learned how to build reusable components and pass dynamic data • State and useState – Understood how dynamic data works and how React re-renders the UI • Conditional Rendering – Implemented UI logic using if, ternary, and && • Lists and Keys – Rendered dynamic data using .map() and understood the importance of keys • Forms and Controlled Inputs – Built forms where React fully controls the input data Hands-on Practice: • Built a Toggle Message component • Created an AlertMessage component • Implemented a Todo List using map and keys • Developed a Contact Form with state management and styling Key Takeaway: In React, instead of manually updating the DOM, we update the state, and the UI automatically reflects those changes. This phase helped me better understand how React handles data and UI in real-world applications. JASIQ Labs #React #FrontendDevelopment #WebDevelopment #JavaScript #LearningInPublic #MERNStack

5 mistakes I made in my first 3 years with React. The 5th still shows up in senior-level code. When I started with React, I thought becoming strong meant learning hooks, state, and component patterns. In reality, most of my growth came from unlearning bad habits. Here are 5 mistakes that slowed me down the most: ❌ #1: Wrapping everything in React.memo, useMemo, useCallback Read one performance article → went full optimization mode. The irony? Memoization isn't free. It costs memory and readability. In most cases React is fast enough without it. Lesson: Now I only optimize when I can measure the actual problem. ❌ #2: useEffect for everything Fetching? useEffect. Computed value? useEffect. Making coffee? Probably useEffect too. Lesson: → Can calculate during render? Don't use an effect. → Need to sync with an external system? That's what effects are for. React docs literally have a page called "You Might Not Need an Effect." Wish I'd read it 3 years earlier. ❌ #3: Prop drilling 7 levels deep Component A → B → C → D → E → F → G. Only G needs the prop. Change one prop name — update 7 files. Refactor one component — break the chain. Lesson: if a prop passes through 2+ components untouched — use Context, Zustand, or composition. ❌ #4: Treating useState like a database I put EVERYTHING in state. API responses, derived values, formatted dates... If fullName can be computed from firstName + lastName — it's not state. It's a variable. No effect. No extra render. No bugs. ❌ #5: 500-line "god components" This one I still see in senior code. One component that fetches data, handles forms, manages modals, renders tables, validates inputs and etc. "I'll refactor later." Later never comes. Lesson: One component — one responsibility. Not because "clean code." Because in 3 months someone (probably you) will need to change one thing and shouldn't read 500 lines to do it. React taught me that most mistakes aren’t about syntax. They’re about judgment. What React mistake took you the longest to unlearn?

🚀 Day 12 of My React Learning Journey Today I explored something that quietly changes how you think about routing… 👉 Data Routing 💡 What I learned: Routing is not just about moving between pages anymore. Now it’s about: • Fetching data along with routes • Loading content before rendering • Creating smoother user experiences 🧠 The Realization: Before: → “Navigate to a page → then fetch data” Now: → “Fetch data → then render the page” ⚙️ Why this matters: • Better performance • Cleaner data flow • More control over loading & errors • Feels more like a real production app 🔥 What clicked today: React is not just about components… 👉 It’s about how data flows with UI and navigation together 📈 Mindset Shift: Before: → “How do I fetch data inside components?” Now: → “How can routing handle data before UI even loads?” 🚧 This is just a glimpse… Next, I want to: • Build something using data routing • Handle loading & error states properly • Understand advanced patterns 💡 Every day I’m moving from: Learning React → Thinking in systems If you’re also on this journey or building something exciting, let’s connect 🤝 Devendra Dhote Sheryians Coding School #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #100DaysOfCode #ReactRouter

React Learning Series | Contd... #Day20: React 19 Activity Component (Canary/Experimental) Tired of losing component state when using conditional rendering? Or killing performance by hiding elements with CSS? 🚀 React 19 introduces Activity Component It Offers: ✅ State Preservation: <Activity mode="hidden"> keeps your component in the background. If a user typed in an input or moved a slider, that data stays exactly where they left it. ✅ Low-Priority Background Updates: While a component is hidden, React still allows it to re-render in response to prop changes, but it does so at a lower priority. ✅ Instant Restorations:  Because the DOM and state are preserved, switching back to visible feels nearly instant—no "loading" states or re-fetching data from scratch. ✅ Automatic Effect Cleanup:  When hidden, React automatically calls cleanup functions for useEffect and useLayoutEffect. This stops active subscriptions, timers, or video/audio playback while the user isn't looking, but "resumes" them instantly when made visible again. Best Use Cases: 👉 Tabbed Interfaces: Switch between "Home" and "Settings" without losing the user’s progress or form data. 👉 Modals & Sidebars: Hide transient UI without resetting scroll positions or open dropdowns. 👉 Pre-rendering: Silently render a page the user is likely to visit next in a hidden state so it's ready the moment they click. 👉 Media Previews: Pause background video/audio when hidden while keeping the playback position exactly where the user left off. #ReactJS #WebDevelopment #Frontend #React19 #Javascript #ProgrammingTips #WebDev

🚀 Day 04 of Learning TypeScript — Understanding Arrays, Objects, Tuples, any & unknown Today’s TypeScript session was all about mastering the core building blocks of strongly typed JavaScript. Here’s what I learned 👇 🔷 1. Arrays in TypeScript Arrays allow us to store multiple values of the same type. let numbers: number[] = [1, 2, 3]; let mixed: (string | number)[] = ["rohit", 22]; ✔ Strong type-checking ✔ Prevents invalid values 🔷 2. Objects in TypeScript Objects define structured data using key–value pairs. type User = { name: string; age: number; }; const user: User = { name: "Rohit", age: 21 }; ✔ Optional & readonly fields supported ✔ Perfect for real-world data models 🔷 3. Tuples Tuples are fixed-length arrays with specific types in order. let person: [string, number] = ["Rohit", 21]; ✔ Useful for predictable data like API responses 🔷 4. any Type any disables TypeScript checks. Use it when you don't know the data type, but carefully. let data: any = 10; data = "hello"; // no error ⚠ Overuse can break type safety 🔷 5. unknown Type A safer alternative to any. You must check the type before using it. let value: unknown = "Rohit"; if (typeof value === "string") { console.log(value.toUpperCase()); } ✔ Encourages safe type validation ✔ Keeps code predictable 💡 Key Takeaways Arrays: store multiple values of same type Objects: structured data with defined shape Tuples: ordered, fixed-size typed arrays any: flexible but risky unknown: safe + powerful 🔥 Excited for tomorrow’s learning — moving deeper into TypeScript fundamentals. #typescript #learning #webdevelopment #frontend #javascript #programming #developers If you want, I can also make a more short, more engaging, or emoji-rich version.

Day 17 / 40 – Frontend Learning Challenge Today I learned about Arrays and Array Methods in JavaScript. An array is used to store **multiple values in a single variable**. It’s very useful when working with lists of data like users, products, or tasks. **Example of an Array** ```javascript const fruits = ["Apple", "Banana", "Mango", "Orange"]; ``` Each value in an array has an **index** starting from **0**. ```javascript console.log(fruits[0]); // Apple console.log(fruits[2]); // Mango ``` --- **Common Array Methods I Learned Today** **push()** – Adds an element to the end ```javascript fruits.push("Grapes"); ``` **pop()** – Removes the last element ```javascript fruits.pop(); ``` **shift()** – Removes the first element ```javascript fruits.shift(); ``` **unshift()** – Adds an element at the beginning ```javascript fruits.unshift("Strawberry"); ``` **length** – Returns the number of elements ```javascript console.log(fruits.length); ``` --- **Looping Through Arrays** ```javascript fruits.forEach(function(fruit) { console.log(fruit); }); ``` --- **Why Arrays Matter in Frontend Development** Arrays are everywhere in JavaScript: • Displaying lists of products • Rendering UI components in frameworks like React • Handling API data • Managing dynamic data Understanding arrays makes it much easier to work with **real-world web applications**. **Day 17 complete — continuing my journey to become a Frontend Developer.** #40DaysOfCode #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic