React Context API Mastery: Scaling Apps with Global Data Sharing

🚀 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

🚀 #Day20 of My Learning Journey 💻 Today was focused on full-stack development, backend API building, DSA problem-solving, and revising JavaScript fundamentals. 🔹 Django Continued learning Django by strengthening backend concepts and improving understanding of application flow. 🔹 React Full Application – CRUD Built a complete CRUD application in React, focusing on component structure, state management, and clean UI interactions. 🔹 Backend API Development Developed backend APIs to support the React application, strengthening the connection between frontend and backend. 🔹 LeetCode – Jump Game II Normal Approach: Use recursion or dynamic programming to try all possible jumps. Time Complexity: O(n²) Space Complexity: O(n) Optimal Approach: Use a greedy approach to track the farthest reachable index and count jumps. Time Complexity: O(n) Space Complexity: O(1) 🔹 JavaScript Revision Revisited important JavaScript concepts to reinforce fundamentals and improve coding clarity. 💡 Takeaway Building full-stack applications while practicing optimized DSA solutions helps develop real-world development skills 🌱 Masai #Django #ReactJS #JavaScript #LeetCode #DSA #BackendDevelopment #dailylearning #100DaysOfCode #FullStackJourney #Masaiverse #Masai

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

Struggling to learn a tech stack by actually building something? 💡 A lot of students start learning a new technology with excitement — React, Node, AI… but after a few tutorials, they get stuck. Not because they can’t code, but because they don’t know what to build next or how to apply what they learned in a real project. Most don’t want more theory — they want to learn by building small, real projects step by step. But the biggest blockers are: • “What should I build?” • “How do I start?” • “Where do I find a team?” So I built CampusConnector — a platform designed for students who want to learn tech stacks by building projects. 🚀 What it helps you do: ✨ AI-Powered Idea → Plan Describe your idea in simple English → get: • Project breakdown • Suggested tech stack • What you need to learn 🔍 Research Support • Find Kaggle datasets • Explore similar GitHub projects → so you can start quickly 👥 Find Teammates • Match with students based on skills • Send invites & build your team 🧠 Workspace Hub • Manage your project in one place • Track team members & progress 📌 Task Management • Create & assign tasks • Track status (To Do → In Progress → Done) • Activity logs to see what’s happening in the team 📂 Resources & Integrations • Add GitHub repo • Add Figma / docs • Keep everything organized 🤖 AI Task Generation • Automatically generate tasks for your project 💻 Built using: React + Node.js + MongoDB + AI APIs If you’re someone who wants to learn by building projects (not just watching tutorials) — this is for you. 🌐 Try it here: https://lnkd.in/gmgqNJ7H #BuildInPublic #StudentDevelopers #LearnByDoing #FullStack #ReactJS #NodeJS #CampusConnector

One of my absolute favorite learning platforms has to be NamasteDev.com ❤️ And honestly, the way Akshay Saini 🚀 explains concepts, just amazing. He has this rare ability to make even the most complex topics feel simple and intuitive. One line that truly stuck with me: “Time, tide and JavaScript wait for none.” ⏳⚡ It perfectly captures the ever-evolving nature of the JavaScript ecosystem. Recently, I revisited the history of Node.js, and it’s fascinating 👇 Node.js was introduced in 2009 by Ryan Dahl with a simple but powerful idea ➡️ JavaScript should not be limited to browsers ➡️ It should be able to run on servers efficiently But here’s the real game changer… 🔹 libuv — the unsung hero of Node.js While many think Node.js is “single-threaded,” the magic actually happens behind the scenes with libuv. 💡 libuv handles: - Asynchronous I/O operations - Thread pool management - Event loop execution This is what makes Node.js non-blocking and highly scalable 🚀 So while we write simple JavaScript code, libuv is working like a superhero in the background, managing threads, handling file systems, and ensuring smooth execution. 👉 That’s the beauty of great learning when someone explains not just what, but why it works the way it does. Grateful for platforms and mentors who simplify tech at this level 🙌 #JavaScript #NodeJS #NamasteDev #AkshaySaini #WebDevelopment #Backend #Learning #TechJourn

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 journey just hit a new level of "Deep Understanding." Building a simple digital clock sounds easy, but the logic behind useEffect and useState has some tricky layers. I ran into three specific problems that taught me how React handles the DOM: 1. The "Ticking Bomb": At first, every time the state updated, a new setInterval was registered. The app was re-rendering and creating infinite intervals! I fixed this by wrapping the logic in useEffect. 2. The "Invisible Leak": Even after hiding the clock, the interval kept running in the background. I solved this by returning a cleanup functionclearInterval(a) to wipe the reference when the component unmounts or hides. 3. The "UI Lag": When I toggled the clock back on, it would show the old time for 1 second before the interval kicked in. I fixed this "stale UI" by adding an immediate setTime call right before starting the interval so the update is instant. It’s not just about making things work; it’s about making them efficient! Check it out here: Live Demo: https://lnkd.in/gsG7Jeaz Source Code: https://lnkd.in/gVBvdwWq #ReactJS #WebDev #JavaScript #CodingLogic #FrontendDevelopment

The Problem With Chasing Too Many Tech Stacks One mistake many developers make is trying to learn too many technologies at once. Today it's React. Tomorrow it's Vue. Next week it's Flutter. Next month it's Rust. Learning tools is good. But constantly switching prevents mastery. Instead: Pick a stack. Go deep. Understand how it works internally. Build real projects. Once your fundamentals are strong, learning new tools becomes easier. Depth matters more than endless switching.

‎I just published a new article on Medium about learning React the right way in 2 months. ‎ ‎In the article, I break down: ‎• The best React learning stack ‎• The projects every beginner should build ‎• How to structure your daily coding routine ‎• What your GitHub should look like after 60 days ‎ ‎If you're starting your journey into frontend development, this guide will help you stay focused and build real projects. ‎ ‎You can read the full article here: ‎🔗 https://lnkd.in/eGREjXfD ‎ ‎Let me know what you think 👨💻 ‎

🚀 #Day10 of My Learning Journey 💻 Today was focused on backend learning, DSA problem-solving, frontend application building, and strengthening JavaScript fundamentals. 🔹 Django Continued learning Django by strengthening backend concepts and gaining deeper clarity on application flow. 🔹 LeetCode – Remove Element Normal Approach: Create a new array and add elements that are not equal to the given value. Time Complexity: O(n) Space Complexity: O(n) Optimal Approach: Use the two-pointer technique to overwrite unwanted elements in the same array. Return the new length of the modified array. Time Complexity: O(n) Space Complexity: O(1) 🔹 React Application Development Built a React application, focusing on component structure, state management, and clean UI interactions. 🔹 JavaScript Learning Learned and revised JavaScript concepts to strengthen logic and frontend fundamentals. 💡 Takeaway Practicing optimized DSA solutions while building real applications helps develop strong and efficient coding skills 🌱 Masai #Django #ReactJS #JavaScript #LeetCode #DSA #FrontendDevelopment #dailylearning #100DaysOfCode #FullStackJourney #Masaiverse #Masai