🚀 Day 23 – Throttling Events in JavaScript Ever noticed your app lagging during scroll or resize? 🤔 That’s because some events fire hundreds of times per second! 💡 Today I explored Throttling — a simple yet powerful technique to control how often a function executes. 👉 Instead of running a function continuously, throttling ensures it runs at fixed intervals ⏱️ 🔥 Why it matters: ✔ Improves performance ✔ Prevents unnecessary function calls ✔ Makes UI smoother ⚡ Common Use Cases: 📜 Scroll events 📏 Window resize 🖱️ Mouse movement 🎯 Animations & tracking 🧠 Pro Tip (Angular Devs): Using @RxJS makes throttling super easy with throttleTime() 🔥 Small optimization… but a huge impact on performance! 💯 💬 What’s your go-to: Throttling or Debouncing? #Day23 #JavaScript #Angular #WebDevelopment #Frontend #Performance #RxJS #CodingJourney

I'm going to talk about two things in it: Activity and useEffectEvent. Both were experimental for two-plus years. Both are now stable. Activity You know the drill with conditional rendering. Works fine until users complain that switching tabs clears their form. The component unmounts, state goes with it. Activity mode="hidden" keeps the component alive but out of sight. Effects get unmounted, so nothing runs in the background. Updates pause until React clears its queue. State stays. The mental model that clicked for me: you're parking the component, not deleting it. Tabbed UIs, back navigation that remembers scroll and input state, pre-loading a page while the user is still on another one — these all make sense now without reaching for manual state hoisting. useEffectEvent This one fixed something that's been annoying me for a long time. Say you have an effect that opens a WebSocket. When the connection is established, you show a notification. The notification reads from a theme prop. If you add theme to the dependency array, the socket reconnects every time the theme changes. If you leave it out, the linter is unhappy. useEffectEvent lets you pull the notification logic into a separate function. That function always reads the latest theme but doesn't count as a reactive dependency. The socket reconnects when the room changes. Not when the theme does. A few rules to know: don't put useEffectEvent functions in dependency arrays, don't call them during render, don't pass them to child components. They're not a general escape hatch. They're for logic that behaves like an event — something that fires from inside an effect but shouldn't control when that effect runs. What actually changed For me, both of these reduce the number of cases where the right answer was "hoist the state up" or "add an eslint-disable comment and move on." That's not nothing. #react #frontend #javascript #webdev #reactjs #frontenddevelopment #softwaredevelopment

Have you ever felt frustrated with unwanted re-renders of React components and struggled to find a proper solution? Consider the following insights and share your worst re-render story below. Deep diving into React has taught me more than any tutorial ever could. The more I explored its internals, the more I realized how much was hiding beneath the surface. Re-renders seem simple until your app starts lagging, and you have no idea why. Here’s what I learned the hard way: → Understanding what actually triggers a re-render (it's not just setState) → Why React.memo silently breaks when you pass inline functions or objects → The Context trap that re-renders every consumer even when they don't care about the change → When to reach for useMemo vs useCallback and when to skip both entirely → How the key prop is a reset weapon, not just a list requirement → Architecture patterns that prevent re-renders by design, no memoization needed The deeper you go, the more you realize React rewards curiosity. Every "why is this slow?" question led me to a better mental model. Swipe through the carousel and save the slide that matches your current bug. #React #Frontend #JavaScript #WebDev #LearningInPublic

useEffect can cause you side effects. I've seen people with months of React experience still getting burned by it. This is Post 8 of the series: 𝗥𝗲𝗮𝗰𝘁 𝗨𝗻𝗱𝗲𝗿 𝘁𝗵𝗲 𝗛𝗼𝗼𝗱 Where I explain what React is actually doing behind the scenes. 🔹 It doesn't run when you think it does. Most devs assume useEffect runs during render. It doesn't. It fires AFTER the render and AFTER the browser paints. React keeps the render phase pure and side-effect free on purpose. 🔹 The dependency array controls everything. This one argument decides when your effect runs. No array → runs after EVERY render [ ] empty → runs once on mount [dep] → runs when that value changes Get this wrong → bugs that are nearly impossible to debug. 🔹 [ ] is often a lie. Everyone slaps [] thinking "run once and forget." But if you're using any variable from inside the component and not declaring it as a dep — that's a stale closure. A hidden bug that silently uses outdated data. 🔹 Missing deps → infinite loops. useEffect with no dep array + a setState inside? That's: render → effect fires → state updates → re-render → effect fires again… Infinite loop. Your app crashes. You panic. 🔹 Cleanup is NOT optional. Every event listener, timer, interval, or subscription you create inside useEffect needs to be cleaned up. No cleanup → memory leaks grow silently in the background. 🔹 Stop overusing it. useEffect is for syncing with external systems. Not for everything. Deriving state, transforming data, computing values. None of that needs useEffect. Ask yourself before writing it: "Is this syncing with something outside React?" If no → you probably don't need it. Next post : State vs Ref vs Variable Follow Farhaan Shaikh if you want to understand React more deeply. 👉 Read the previous post: React hooks hate you for this: https://lnkd.in/d7ySVnJA #React #ReactJS #WebDevelopment #Frontend #JavaScript #useEffect #BuildInPublic #LearnInPublic #FrontendDevelopment #ReactUnderTheHood #DevTips #WebDev #Programming

Are you guys still asking the same question? "Should we use Next.js?" Except now the answer is genuinely harder than it used to be. The framework that solved SSR for React teams has real competition. SvelteKit is faster to ship. Astro is cleaner for content. Nuxt has matured. And the Vercel question is no longer something you can ignore at scale. At the same time, Next.js has never been better. Turbopack, PPR, smarter caching, deeper React integration. The team is shipping fast. So where does that leave us? Probably here: the era of one default framework for every React project is over. The right answer now depends on your team, your scale, and your infrastructure. I put together 8 slides breaking it all down. No agenda. Just a honest look at where Next.js stands, where it wins, where it does not, and a simple guide for picking the right tool for your next project. Swipe through and tell me where you land. #nextjs #javascript #reactjs #developers #coding

This is where React actually starts making sense… At first, everything looks confusing — but then you learn Props & State, and suddenly… things click. ⚡ Props are how your components communicate. They pass data from parent to child — clean and predictable. State is what makes your app alive. It controls changes, updates UI, and handles user actions. 👉 Props = Data coming in 👉 State = Data changing inside Master these two… and you move from writing static pages to building interactive, real-world applications. Most beginners skip deep understanding here — and that’s exactly why they get stuck later. Don’t just learn React… understand how it thinks. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CodingJourney #LearnToCode #DevelopersLife #UIEngineering #ReactBasics #TechSkills

🚀 Understanding useEffect in React — Made Simple! While learning React, one concept that really stood out to me is useEffect. It helps us handle actions that happen after a component renders. 🔹 What is useEffect? It runs code after the component renders and reacts to changes in state or props. 🔹 Basic Syntax: useEffect(() => {   // your code here }, [dependencies]); 🔹 How it works: 👉 Component renders 👉 useEffect runs 👉 State/props change 👉 Component re-renders 👉 useEffect runs again 💡 Key Idea: Runs after render & reacts to changes This hook is very useful for: ✔ API calls ✔ Data fetching ✔ Updating UI dynamically Still exploring and improving my frontend skills step by step 🚀 #ReactJS #useEffect #FrontendDevelopment #WebDevelopment #JavaScript #LearningJourney

🚀 React Deep Dive — Components, Elements & Re-renders While exploring advanced React concepts, I came across a few ideas that completely changed how I think about rendering. 🔹 A Component is just a function that takes props and returns elements const A = () => <B /> 🔹 An Element is an object that describes what should appear on the screen const b = <B /> 🔹 A re-render is simply React calling the component function again 🔹 A component re-renders when its element object changes 🔹 When elements are passed as props, they don’t re-render just because the parent re-renders 🔹 children are just props — nothing special! They behave exactly like any other prop passed to a component 📚 Inspired by advanced React learning concepts #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #LearningInPublic

🚀 Master React Router in Minutes! Here’s a simple breakdown of everything you need to know: ✅ What is Routing ✅ SPA Concept ✅ Static vs Dynamic Routes ✅ useParams() ✅ Protected Routes 💡 Key Takeaways: React uses SPA (Single Page Application) Routing helps display components based on URL Dynamic routes make apps scalable Protected routes secure your app 📌 If you're learning React, this is a must-know concept! Let me know in comments 👇 What topic should I cover next? #React #WebDevelopment #Frontend #JavaScript #ReactJS #Coding #LearnToCode

🎬 Movie Search Application (React) Developed a responsive movie search web application using React that allows users to search and explore movies in real time. The application integrates with an external movie API to fetch dynamic movie data such as title, poster, year. Implemented core React concepts including state management using hooks like useState and useEffect, along with event handling for search functionality. Added features like instant search, Enter key search, conditional rendering for error handling, and sorting movies by release year. Designed a clean and responsive UI using Flexbox and styled-components, including dark mode support for better user experience. 🔗 Live Demo https://lnkd.in/g2X-_Ken 💻 GitHub Repository https://lnkd.in/gczd-9bY #ReactJS #JavaScript #APIIntegration #RESTAPI #StyledComponents #ResponsiveDesign #FrontendDevelopment #WebDevelopment #MovieApp #FrontendProject #Coding #WebApp #Netlify #GitHub #OpenSource