React Routing Explained with React Router

What I Learned Today: Routing in React Today I learned how routing works in React and how we can navigate between different pages without reloading the browser 🔥 Key Concepts I Explored: 1. BrowserRouter – Enables routing across the entire application 2. Routes – Acts as a container for multiple routes 3. Route – Maps a specific URL path to a component 4. Navigation using useNavigate() and Link 🎯 This helped me understand how real-world applications handle navigation smoothly and efficiently. * I also implemented this in my project: * Created a Home page * Added navigation to a Weather page using React Router Learning something new every day and building step by step! #ReactJS #ReactRouter #FrontendDevelopment #WebDevelopment #JavaScript #CodingJourney #LearningInPublic #100DaysOfCode

Built a Product Sorting Feature in React! I implemented dynamic sorting using useState and an array.sort() now products reorder instantly based on user selection. 🔹 Sort by Price (Low → High, High → Low) 🔹 Sort by Name (A → Z) 🔹 Used the spread operator to avoid mutating the original array This helped me understand how state + sorting works in real projects. 💻 Tech: React.js, JavaScript #ReactJS #JavaScript #FrontendDeveloper #WebDevelopment #CodingJourney

useImperativeHandle is one of the most underrated React hooks. useImperativeHandle lets a parent trigger specific actions in a child component — focus, reset, open, close — without exposing internal logic. #ReactJS #ReactHooks #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #CleanCode #UIEngineering #FrontendEngineer

⏱️ Built a Todo List with Timer using React Tried building a Todo List where each task has its own timer control — small idea but interesting state handling. Features: • Add todos dynamically • Start timer for each task individually • Reset timer per task • Delete tasks • Independent timer state for every item What I learned: • Managing multiple independent states in a list • Handling setInterval / timers safely in React • Avoiding memory leaks with proper cleanup • Structuring components for better state isolation • Updating UI efficiently without affecting other items This was a great exercise in understanding how to handle time-based state and side effects in React. Concept inspiration from learning resources by Akshay Saini 🚀 NamasteDev.com. Demo 👇 #ReactJS #FrontendDevelopment #JavaScript #BuildInPublic #WebDevelopment

Avoid Unnecessary Re-renders in React Many React applications become slow not because of bad logic, but because of unnecessary re-renders. To understand this better, I prepared a short PDF explaining: -Memoization in React -useMemo vs useCallback vs React.memo -When optimization is useful -When memoization actually makes performance worse -Best practices for real projects Always remember: Measure first, optimize later. Sharing this guide for developers who want to improve React performance. #ReactJS #FrontendDeveloper #CleanCode #PerformanceOptimization #JavaScript

🤯 Ever wondered why React prints old values? I finally understood stale closures by connecting it with JavaScript closures. Sharing my notes in this carousel 👇 “Slide 8 explains the real problem clearly” #React #JavaScript #FrontendDevelopment

Stop nesting your async calls in React! 🛑 Using async/await within a clean useEffect structure (or a custom hook) keeps your code readable, maintainable, and much easier to debug. What's your biggest React pet peeve? 👇 #ReactJS #CleanCode #JavaScript #softwaredevelopment #React

Most developers jump straight into React… But the real game-changer? 👉 Mastering JavaScript first. React is just a layer, the real power comes from understanding closures, async behavior, event loop, and how the browser actually runs your code. When you deeply understand JavaScript: • Debugging becomes easier • Performance thinking improves • Frameworks feel replaceable, not overwhelming I used to focus on “how to build in React” Now I focus on “how JavaScript works underneath” And suddenly… everything clicks. Frameworks will change. Concepts won’t. #JavaScript #ReactJS #WebDevelopment #FrontendDeveloper #CodingJourney #LearnToCode #DeveloperMindset

💡 #JavaScript Global vs Local Variables (Simple Explanation) If you're learning JavaScript, understanding variable scope is a must 👇 🔹 Global Variables Declared outside any function Accessible from anywhere in your code Can be used across multiple functions Example: var name = "Avi"; function greet() { console.log(name); // Accessible here } 🔹 Local Variables Declared inside a function or block Accessible only within that function/block Helps avoid unwanted changes from outside Example: function greet() { var message = "Hello"; console.log(message); // Works here } console.log(message); // ❌ Error ⚡ Key Difference Global = accessible everywhere Local = accessible only inside its scope 👉 Tip: Prefer #local variables to keep your code clean and avoid bugs. Use #global where multiple parts of your app need the same value. #frontend #js #javascript

most React developers have too many useEffects. i did too. until i read this rule and couldn't unsee it: if you're using useEffect to sync state with another state you don't need useEffect. here's what i mean. (the pattern 1 .. i see everywhere) but pattern 2 give same result . no effect. no extra render cycle. useEffect is for syncing React with something outside React. - fetching data from an API - setting up a subscription - manually touching the DOM not for calculating values you could just... calculate. every unnecessary useEffect is a hidden render cycle your users pay for. before you write useEffect ask one question: am i syncing with something outside React, or am i just doing math? if it's math delete the effect. #reactjs #typescript #webdevelopment #buildinpublic #javascript