🚀 Excited to share my latest project! I built a Notes App using JavaScript & LocalStorage that allows users to create, save, and delete notes efficiently. ✨ Key Features: • Add & delete notes • Data stored using LocalStorage • Simple and clean UI 🔗 Live Demo: https://lnkd.in/d_zt2ems This project helped me strengthen my understanding of DOM manipulation and browser storage. 💡 Next, I plan to add features like Edit, Search, and Dark Mode. #JavaScript #WebDevelopment #FrontendDeveloper #Projects #Learning

Ever wondered which React component is actually slowing down your UI? Most of the time when a React app feels slow, we start guessing: “Maybe it's the API… maybe it's Redux… maybe it's the component tree.” But React already gives us a built-in tool to identify the exact problem: React Profiler. You can open it directly inside React DevTools → Profiler tab and record how your components render. What makes it powerful: • Shows which components re-rendered • Displays how long each component took to render • Highlights unnecessary re-renders • Helps identify components that need memoization For example, I once noticed a list component re-rendering dozens of child items unnecessarily. Using the Profiler made it obvious, and a simple React.memo reduced the rendering work significantly. Instead of guessing performance issues, React Profiler lets you see the exact rendering cost of each component. One of the most underrated tools for debugging React performance. Have you ever used the React Profiler to debug re-renders? #reactjs #frontenddevelopment #javascript #webperformance #webdevelopment

Day 13: Component Lifecycle in React (Using Hooks) Before Hooks, React had lifecycle methods in class components. Now, with Hooks, we can handle the entire lifecycle using useEffect. 📌 What is Component Lifecycle? Every React component goes through 3 main phases: 1️⃣ Mounting → Component is created and added to the DOM 2️⃣ Updating → Component re-renders when state/props change 3️⃣ Unmounting → Component is removed from the DOM 📌 Handling Lifecycle with useEffect 👉 1. Mounting (Component Did Mount) useEffect(() => { console.log("Component Mounted"); }, []); Runs only once when the component loads. 👉 2. Updating (Component Did Update) useEffect(() => { console.log("Component Updated"); }, [count]); Runs whenever count changes. 👉 3. Unmounting (Component Will Unmount) useEffect(() => { return () => { console.log("Component Unmounted"); }; }, []); Used for cleanup (like clearing timers, removing listeners). 📌 Real-world Example Think of a timer app • Start timer → Mount • Update time → Update • Stop/leave page → Unmount 📌 Why Lifecycle is Important ✅ Prevent memory leaks ✅ Manage API calls properly ✅ Control when code runs ✅ Optimize performance #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CodingJourney #LearnInPublic

🚀 Just built a Sticky Notes App using Next.js 16 + TypeScript I recently created StickyBoard, a feature-rich sticky notes application focused on clean UI and smooth user experience. ✨ Key Features: 📝 Create, edit, and delete notes instantly 🎨 5 color themes for better organization 🌙 Dark / Light mode with system preference detection 🔍 Live search across notes 📱 Fully responsive masonry layout 💾 Notes persist using localStorage ⚡ Instant updates without saving 🆕 New Feature Added Drag & Drop notes to easily reorder them. 🛠 Tech Stack: Next.js 16 (App Router) TypeScript CSS Modules GitHub Actions (CI/CD) Vercel Deployment 🌐 Live Demo: [https://lnkd.in/gfp8rsjj] 💻 GitHub Repository: [https://lnkd.in/gEtm3GcR] Would love to hear feedback from the community! #NextJS #ReactJS #WebDevelopment #FrontendDeveloper #TypeScript #JavaScript #BuildInPublic

I Finally Understood useEffect… Somehow A few days deeper into React, and things are starting to click, not perfectly, but enough to feel real progress. At first, hooks felt confusing. Especially useEffect. Why does it run? When does it run? Why does it run again? It didn’t make sense… until I stopped overthinking it and started building. Here’s what I’ve worked on so far: -> useState Understanding how state drives UI changes made everything feel more dynamic and controlled. -> useEffect Still not “mastered”, but now I understand how it handles side effects, especially API calls and controlled execution. -> Built small apps Counter app (state updates, re-rendering) Meme generator (API hit using useEffect, dynamic content, event handling) These small builds did more than tutorials ever could, they forced me to connect the dots. The biggest shift? I have stopped trying to memorize React… and started trying to think in React. Still early, but now it feels like direction instead of confusion. Next: Better structure, deeper hooks, and more real-world projects. For developers: How do you clearly decide when to use useEffect, and when not to? #ReactJS #FullStackDeveloper #WebDevelopment #BuildInPublic #JavaScript #LearningJourney

🚀 Built an Image Gallery App using React! Today I took another step forward in my React journey by learning an important React Hook — useEffect. It is used to handle side effects in React components, such as fetching data from an API, and it also helps control when the code should run. I also learned about Axios, a JavaScript library used to make HTTP requests to servers. To practice these concepts, I built a Gallery Application that fetches images from the Lorem Picsum API and displays them in a responsive UI. While building this project, I solved a couple of challenges: 1. Pagination I implemented pagination using a state variable for the page index. When the Next or Prev button is clicked, the page number changes and new images are fetched from the API. 2. Loading State I also added a loading indicator that appears while the images are being fetched. Once the data is loaded, the images are rendered in the gallery. What I practiced in this project: • React useState • React useEffect • Axios for API requests • Pagination logic • Conditional rendering (Loading state) • Component-based UI design Building small projects like this helps me understand how React works in real-world applications. Looking forward to building more and improving my skills! 🚀 #ReactJS #WebDevelopment #JavaScript #FrontendDevelopment

This is one of my recently built project, a simple Quiz App using React, and it turned out to be a great revision of core concepts. 🔹 State Management (useState) Handled multiple states like current question index and user answers. 🔹 Updating State Without Mutation Instead of pushing directly into arrays, I used: setUswerAnswer([...uswerAnswer, ans]); This reinforced why React needs immutable updates to re-render properly. 🔹 Conditional Rendering Displayed questions, score, and results based on the index: Show questions while quiz is running Show result when quiz ends This made me more comfortable with dynamic UI rendering. 🔹 Handling Lists & Events Mapped over options and attached click handlers to capture user answers. Also learned the importance of keys in lists. Quiz Link : https://lnkd.in/g_TU_Puy Still learning and improving step by step #ReactJS #JavaScript #FrontendDevelopment #LearningByBuilding

🚀 Just built a full-featured Todo App in React! ✅ Add, Edit & Update tasks ✅ Mark tasks as Complete / Pending ✅ Filter by All / Completed / Pending ✅ Persistent data with LocalStorage ✅ Clean UI with counters & interactive buttons This project helped me strengthen my React skills, state management, and UI handling. 🌟 Source Code: 👉https://lnkd.in/dSRsWdeM Muhammad Osama Saylani Mass I.T Training (S.M.I.T) #ReactJS #WebDevelopment #JavaScript #FrontendDevelopment #CodingJourney #ProjectShowcase #TodoApp

I removed useEffect from my code… and my app got faster ⚡ Yes, seriously. For a long time, I was doing this in React: useEffect(() => { fetchUsers(); }, []); Seemed correct… right? ❌ But in real projects, this caused: • Multiple unnecessary API calls • Data mismatch bugs • Hard-to-control logic 💡 Then I changed my approach: Instead of auto-calling APIs inside useEffect, 👉 I started triggering APIs based on user actions Example: • Search → onChange • Button → onClick ✅ Result: • Better control over API calls • Cleaner component logic • Improved performance (~30% fewer calls) 🔥 What I learned: useEffect is powerful… but overusing it makes your code messy. 💬 Curious: Do you still rely on useEffect for API calls? #ReactJS #FrontendDeveloper #JavaScript #CodingTips #WebDevelopment

I removed useEffect from my code… and my app got faster ⚡ Yes, seriously. For a long time, I was doing this in React: useEffect(() => { fetchUsers(); }, []); Seemed correct… right? ❌ But in real projects, this caused: • Multiple unnecessary API calls • Data mismatch bugs • Hard-to-control logic 💡 Then I changed my approach: Instead of auto-calling APIs inside useEffect, 👉 I started triggering APIs based on user actions Example: • Search → onChange • Button → onClick ✅ Result: • Better control over API calls • Cleaner component logic • Improved performance (~30% fewer calls) 🔥 What I learned: useEffect is powerful… but overusing it makes your code messy. 💬 Curious: Do you still rely on useEffect for API calls? #ReactJS #FrontendDeveloper #JavaScript #CodingTips #WebDevelopment