Today I focused on improving my understanding of: ⚡ React component structure ⚡ Reusable UI patterns ⚡ Proper folder organization in large projects ⚡ Clean Tailwind styling without messy class overload One small improvement I made: Instead of writing repetitive UI code, I created reusable components and passed props dynamically. It made my code cleaner and easier to scale. Learning this made me realize: Good frontend development is not about making it work — it's about making it maintainable. Building consistently. Improving daily. 💻🔥 #ReactJS #FrontendDeveloper #JavaScript #TailwindCSS #WebDevelopment #LearningInPublic #SheryiansCodingSchool #FullstackDevelopment

While starting to learn React, I decided to keep things simple. I built the same Todo List twice with the same UI design: First using pure JavaScript, Then rebuilding it with React. This helped me clearly see the difference between: • JavaScript DOM manipulation • React’s component-based thinking Project features: • Add new tasks • Delete tasks • Toggle task completion • Search tasks • Filter tasks (All / Completed / Not Completed) Small project, but a big learning step for me. Live Demo: JS version: https://lnkd.in/ebWQRNar React version: https://lnkd.in/eJt2Svj7 #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #TodoApp

🚀 Understanding setTimeout() and setInterval() in JavaScript Two important JavaScript timer functions: setTimeout() and setInterval() — both essential for handling asynchronous behavior in web applications. ⏳ setTimeout() is used when we want to execute something after a specific delay. It runs only once. 🔁 setInterval() is used when we need something to run repeatedly at fixed intervals until we stop it. These functions are widely used in: Showing notifications after a delay Creating countdown timers Auto-refreshing data Building real-time features Animations and UI interactions Understanding how JavaScript handles timing helps in building more interactive and dynamic applications. Learning small concepts deeply makes a big difference in frontend development. 💡 #JavaScript #FrontendDevelopment #WebDevelopment #AsyncProgramming #CodingJourney

🚀 Day 1 of #30Days30SwiperProjects Built a Coverflow-Effect Slider using Swiper.js, HTML, CSS, and JavaScript 🎯 Focused on smooth UI interactions, transitions, and responsiveness. 🔗 Live Demo - https://lnkd.in/dFUCVi8v Learning UI interactions by building daily 💪 Consistency is the key to growth. #SwiperJS #JavaScript #Frontend #UIDeveloper #BuildInPublic

💡 𝗧𝗶𝗽 𝗼𝗳 𝘁𝗵𝗲 𝗗𝗮𝘆 — 𝗥𝗲𝗮𝗰𝘁 𝗗𝗶𝗱 𝘆𝗼𝘂 𝗸𝗻𝗼𝘄? Keys in React are 𝗻𝗼𝘁 𝗷𝘂𝘀𝘁 𝗳𝗼𝗿 𝗿𝗲𝗺𝗼𝘃𝗶𝗻𝗴 𝘄𝗮𝗿𝗻𝗶𝗻𝗴𝘀 — they control how React 𝗶𝗱𝗲𝗻𝘁𝗶𝗳𝗶𝗲𝘀 𝗮𝗻𝗱 𝗿𝗲𝘂𝘀𝗲𝘀 𝗲𝗹𝗲𝗺𝗲𝗻𝘁𝘀. Using unstable keys (like array indexes in dynamic lists) can cause: - Broken animations - Lost input focus - Incorrect component state 🔧 𝗕𝗲𝘀𝘁 𝗽𝗿𝗮𝗰𝘁𝗶𝗰𝗲: Always use 𝘀𝘁𝗮𝗯𝗹𝗲, 𝘂𝗻𝗶𝗾𝘂𝗲 𝗜𝗗𝘀 from your data whenever possible. Good keys = predictable UI behavior. #React #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #CodingTips #BestPractices #FullstackDeveloper

Ever clicked a button on a webpage and noticed everything else still works smoothly — animations continue, inputs respond, timers fire — even though some heavy operation is happening in the background? That seamless experience is powered by the 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 in JavaScript. JavaScript is single-threaded, which means it can execute only one piece of code at a time. Yet modern applications handle API calls, timers, user interactions, and animations concurrently. The secret behind this apparent multitasking is the Event Loop. At its core, the Event Loop coordinates three major components: • The 𝗖𝗮𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 – where synchronous code executes • The 𝗪𝗲𝗯 𝗔𝗣𝗜𝘀 / 𝗕𝗿𝗼𝘄𝘀𝗲𝗿 𝗔𝗣𝗜𝘀 – where asynchronous tasks like `setTimeout`, DOM events, and fetch requests are handled • The 𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸 𝗤𝘂𝗲𝘂𝗲 (𝗧𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲 & 𝗠𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲) – where completed async tasks wait to be executed Here’s how it works: When synchronous code runs, it goes directly into the call stack. If an asynchronous function like `setTimeout()` or `fetch()` is encountered, it’s handed off to the browser APIs. Once completed, its callback is pushed into a queue. The Event Loop constantly checks: Is the call stack empty? If yes, it moves queued callbacks into the stack for execution. Microtasks (like Promises) are prioritized over macrotasks (like setTimeout), which is why Promise callbacks run before timer callbacks — even if the timer delay is zero. This priority model ensures predictable execution order. Why is this needed? Without the Event Loop, JavaScript would block entirely during long-running tasks. No UI updates. No responsiveness. No scalability for interactive applications. The Event Loop enables non-blocking behavior while keeping JavaScript simple and single-threaded. Key use cases include: • Handling API requests without freezing the UI • Managing timers and intervals • Processing user events (clicks, input, scroll) • Coordinating Promise-based workflows • Powering frameworks like React and Node.js servers Understanding the Event Loop isn’t just about interviews — it’s about writing predictable, performant, and bug-free asynchronous code. Master the flow, and you master JavaScript’s true power. #JavaScript #WebDevelopment #FrontendDevelopment #SoftwareEngineering

💡 𝗧𝗶𝗽 𝗼𝗳 𝘁𝗵𝗲 𝗗𝗮𝘆 — 𝗥𝗲𝗮𝗰𝘁 𝗗𝗶𝗱 𝘆𝗼𝘂 𝗸𝗻𝗼𝘄? Every time a parent component re-renders, 𝗮𝗹𝗹 𝗼𝗳 𝗶𝘁𝘀 𝗰𝗵𝗶𝗹𝗱 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 𝗿𝗲-𝗿𝗲𝗻𝗱𝗲𝗿 𝘁𝗼𝗼 by default. Even if the child’s props didn’t change. 🔧 𝗛𝗼𝘄 𝘁𝗼 𝗼𝗽𝘁𝗶𝗺𝗶𝘇𝗲: Wrap pure components with "React.memo" so they only re-render when their props actually change. This small optimization can significantly improve performance in large component trees. Smarter renders = faster UI. #React #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #PerformanceOptimization #SoftwareEngineering #CodingTips #FullstackDeveloper

💡 𝗧𝗶𝗽 𝗼𝗳 𝘁𝗵𝗲 𝗗𝗮𝘆 — 𝗥𝗲𝗮𝗰𝘁 𝗗𝗶𝗱 𝘆𝗼𝘂 𝗸𝗻𝗼𝘄? Every time a parent component re-renders, 𝗮𝗹𝗹 𝗼𝗳 𝗶𝘁𝘀 𝗰𝗵𝗶𝗹𝗱 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 𝗿𝗲-𝗿𝗲𝗻𝗱𝗲𝗿 𝘁𝗼𝗼 by default. Even if the child’s props didn’t change. 🔧 𝗛𝗼𝘄 𝘁𝗼 𝗼𝗽𝘁𝗶𝗺𝗶𝘇𝗲: Wrap pure components with "React.memo" so they only re-render when their props actually change. This small optimization can significantly improve performance in large component trees. Smarter renders = faster UI. #React #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #PerformanceOptimization #SoftwareEngineering #CodingTips #FullstackDeveloper

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 7/30 I typed inside an input… clicked “Add new item”… and the text moved to another field 😳 The bug? key={index} I used array index as React key. React does not track elements. React tracks keys. When list order changes, React reuses DOM nodes, so your input becomes a different item. Fix 👇 key={item.id} Stable key = stable UI. React warnings are not decoration… they are future bugs. Day 8 tomorrow 👀 #30DaysOfCode #reactjs #javascript #frontend #webdevelopment #codeinuse

Today I learned how useEffect cleanup actually works in React — and it completely changed how I think about side effects. When we use useEffect, it runs after render. But what many beginners ignore is the cleanup function. Why is cleanup important? Prevents memory leaks Stops unnecessary API calls Removes event listeners properly Clears intervals and timeouts Example: When you add an event listener inside useEffect, you must remove it when the component unmounts. Otherwise, it keeps running in the background. That’s where cleanup comes in. useEffect(() => { const handleResize = () => console.log("Resized"); window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); }; }, []); The function returned inside useEffect runs: Before the next effect runs When the component unmounts Small detail. Big difference in performance. React is simple — until you understand the details. #ReactJS #FrontendDeveloper #JavaScript #WebDevelopment #LearningInPublic #100DaysOfCode