Understanding the Event Loop in JavaScript and Node.js

🚨 I used index as key in React… …and spent HOURS debugging something that made no sense. Everything looked fine at first. Until I: → deleted an item → reordered the list 💥 Suddenly: ❌ Wrong data was displayed ❌ UI behaved randomly ❌ Bugs I couldn’t explain I kept checking my logic. Turns out… the bug wasn’t my logic. 👉 It was THIS: {data.map((item, index) => ( <div key={index}>{item.name}</div> ))}💡 Problem: React uses keys to track identity. When you use index: → identity = position ❌ → not the actual item So when the list changes… React gets confused 😵 ✅ Fix: {data.map((item) => ( <div key={item.id}>{item.name}</div> ))}👉 Stable key = stable UI 💡 Lesson: If your UI feels “random”… check your keys before your logic. Follow me for more such tips ✍️ 👨💻 #ReactJS #Frontend #JavaScript #SoftwareEngineering

JavaScript Closures are confusing… until they’re not ⚡ Most developers memorize the definition but struggle to actually understand it. Let’s simplify it 👇 💡 What is a closure? A closure is when a function 👉 remembers variables from its outer scope even after that scope is finished 🧠 Example: function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const fn = outer(); fn(); // 1 fn(); // 2 fn(); // 3 ⚡ Why this works: inner() still has access to count even after outer() has executed 🔥 Where closures are used: • Data hiding • State management • Event handlers • Custom hooks in React #JavaScript #FrontendDeveloper #ReactJS #CodingTips #WebDevelopment

I just committed the last JavaScript code for AuthKit. After debugging today, I don’t think I’ll be writing any more JS for v1.0.0. Feels good getting to this point. Over the past few days I’ve been building AuthKit — a modular authentication toolkit for Laravel. The goal is simple: move authentication beyond basic scaffolding into a structured and testable architecture. Instead of authentication logic living inside controllers, AuthKit structures flows through dedicated actions that return DTO result objects, which are then resolved into either API responses or web redirects. This keeps authentication logic clean, reusable, and much easier to test. The core backend architecture and frontend runtime are now complete. If you'd like to experiment with it early, you can clone the repository and test it locally (it's not yet on Packagist). One small caveat for now: the default styling layer isn’t finished, so you’ll need to provide your own CSS while testing. Planning to release v1.0.0 next week. Repo: https://lnkd.in/eztMKU-z Would love feedback from Laravel developers. #Laravel #PHP #OpenSource #SoftwareEngineering #WebDevelopment

Most React tutorials are still teaching 2020 patterns. In 2026, the ecosystem has shifted dramatically: React 19 is stable, the compiler handles most memoization automatically, and useEffect should be a last resort — not your go-to for data fetching, derived state, or event responses. This guide walks you from project setup to production-ready patterns, with a cheat sheet you can bookmark. #react #web #frontend #next #frontend #performance #javascript #tips #typescript #nextjs

I noticed I was repeating the same API logic in multiple React components. useEffect, useState, loading state, error handling… again and again. It worked, but it didn’t feel right. So I tried moving that logic into a custom hook. Example: function useUserData() {  const [data, setData] = useState(null);  const [loading, setLoading] = useState(true);  useEffect(() => {   fetch('/api/user')    .then(res => res.json())    .then(data => {     setData(data);     setLoading(false);    });  }, []); return { data, loading }; } Now I can reuse it anywhere: const { data, loading } = useUserData(); -No repeated logic. -Cleaner components. -Easier to maintain. Still learning, but custom hooks made my code feel much more structured. #reactjs #webdevelopment #frontend #javascript

💡React Tip💡 Never pass the setState function directly as a prop to any of the child components like this: const Parent = () => { const [state, setState] = useState({ name: '', age: '' }) . . . return ( <Child setState={setState} /> ) } ✅ The state of a component should only be changed by that component itself. ✅ This ensures your code is predictable. If you pass setState directly to multiple components, it will be difficult to identify from where the state is getting changed. ✅ This lack of predictability can lead to unexpected behavior and make debugging code difficult. ✅ Over time, as your application grows, you may need to refactor or change how the state is managed in the parent component. ✅ If child components rely on direct access to setState, these changes can ripple through the codebase and require updates in multiple places, increasing the risk of introducing bugs. ✅ If sensitive data is part of the state, directly passing setState could potentially expose that data to child components, increasing security risks. ✅ React's component reconciliation algorithm works more efficiently when state and props updates are clearly defined within components. ✅ When child components directly call setState, React may not be able to optimize the rendering process as effectively. Instead of passing setState directly, you can do the following: 1️⃣ Pass data as prop: Pass the data that the child component needs as props, not the setState function itself. This way, you provide a clear interface for the child component to receive data without exposing the implementation details of state. 2️⃣ Pass function as prop: If the child component needs to interact with the parent component's state, you can pass the function as a prop. Declare a function in the parent component and update the state in that function, you can pass this function as a prop to the child component and call it from the child component when needed. 𝗙𝗼𝗿 𝗺𝗼𝗿𝗲 𝘀𝘂𝗰𝗵 𝘂𝘀𝗲𝗳𝘂𝗹 𝗰𝗼𝗻𝘁𝗲𝗻𝘁, 𝗱𝗼𝗻'𝘁 𝗳𝗼𝗿𝗴𝗲𝘁 𝘁𝗼 𝗳𝗼𝗹𝗹𝗼𝘄 𝗺𝗲. #javascript #reactjs #nextjs #webdevelopment

Stop using headers() to force dynamic rendering in Next.js. 👇 Let’s be honest: we have all used the "dummy headers" hack. If you were building a component that fetched live database metrics, you didn't want Next.js to statically generate it at build time. But if you weren't actively reading a cookie or a URL parameter, Next.js would aggressively cache it anyway. To break the cache, we would drop headers() or cookies() at the top of our component just to trick the framework into Server-Side Rendering (SSR). It was a duct-tape solution that confused junior developers reading the codebase. Next.js 15 finally introduces the connection() API. ❌ The Legacy Hack: Calling request-specific APIs you don't actually need. Creates confusing, unreadable code intentions. Feels like fighting the framework. ✅ The Modern Standard: Just await connection(). • Explicit Intent: It clearly communicates to other developers (and the compiler) that this code must wait for an active user request to execute. • Zero Hacks: You no longer need to import unused cookies or headers. • Future Proof: It aligns perfectly with the new React Server Components asynchronous rendering model. The Shift: We are moving away from framework "hacks" and embracing explicit, native APIs to control our rendering boundaries. Learn how to use the Next.js 15 connection() API from next/server to explicitly opt into dynamic rendering. Discover how to replace the legacy headers() and cookies() hacks to force Server-Side Rendering (SSR) for real-time database queries in React Server Components. #NextJS #NextJS15 #ReactJS #WebDevelopment #Frontend #JavaScript #CleanCode #SoftwareEngineering #TechTips #WebArchitecture #WebDev #fblifestyle #code.withsr

If you’re writing 5 files just to toggle a boolean... 🛑 You’re not scaling. You’re over-engineering. For a long time, I used Redux for almost everything in React. And honestly? It felt powerful... but also unnecessarily complex for 90% of my use cases. Recently, I switched to Zustand — and the difference is 🔥 Why Zustand just makes sense: ✅ Zero Boilerplate No Providers. No massive folder structures. Just create and use. ✅ Hook-Based If you know useState, you already understand Zustand. It feels like native React. ✅ Performance First It handles selective re-renders out of the box. Only the components that need the data will update. 💻 The "Store" is this simple: JavaScript import { create } from 'zustand' const useStore = create((set) => ({ count: 0, inc: () => set((state) => ({ count: state.count + 1 })), })) Use it anywhere: JavaScript function Counter() { const { count, inc } = useStore() return <button onClick={inc}>{count}</button> } ⚡ 𝗣𝗥𝗢 𝗠𝗢𝗩𝗘 (Most developers miss this): Use selectors to grab only what you need: const count = useStore((state) => state.count) This keeps your app lightning-fast even as your state grows massive. 📈 Since switching, my code is: → Simpler → Cleaner → Easier to maintain 🟣 Team Redux (The tried and true) 🐻 Team Zustand (The minimalist) #ReactJS #Zustand #JavaScript #WebDevelopment #Frontend #CodingTips #SoftwareEngineering

🚀 Day 5/30 – State in React One of the most important concepts 🔥 Today I learned: ✅ State stores dynamic data inside a component → It allows components to manage and update their own data ✅ When state changes → React re-renders the UI → React automatically updates only the changed parts (efficient rendering ⚡) ✅ Managed using useState hook → The most commonly used hook in functional components ✅ State updates are asynchronous → React batches updates for better performance 💻 Example: import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); const handleClick = () => { setCount(prev => prev + 1); // safe update }; return ( <div> <h2>Count: {count}</h2> <button onClick={handleClick}>Increment</button> </div> ); } 🔥 Key Takeaway: State is what makes React components interactive, dynamic, and responsive to user actions. #React #State #FrontendDevelopment #JavaScript #WebDev #CodingJourney #LearnInPublic

Stop using headers() to force dynamic rendering in Next.js. 👇 Let’s be honest: we have all used the "dummy headers" hack. If you were building a component that fetched live database metrics, you didn't want Next.js to statically generate it at build time. But if you weren't actively reading a cookie or a URL parameter, Next.js would aggressively cache it anyway. To break the cache, we would drop headers() or cookies() at the top of our component just to trick the framework into Server-Side Rendering (SSR). It was a duct-tape solution that confused junior developers reading the codebase. Next.js 15 finally introduces the connection() API. ❌ The Legacy Hack: Calling request-specific APIs you don't actually need. Creates confusing, unreadable code intentions. Feels like fighting the framework. ✅ The Modern Standard: Just await connection(). • Explicit Intent: It clearly communicates to other developers (and the compiler) that this code must wait for an active user request to execute. • Zero Hacks: You no longer need to import unused cookies or headers. • Future Proof: It aligns perfectly with the new React Server Components asynchronous rendering model. The Shift: We are moving away from framework "hacks" and embracing explicit, native APIs to control our rendering boundaries. Learn how to use the Next.js 15 connection() API from next/server to explicitly opt into dynamic rendering. Discover how to replace the legacy headers() and cookies() hacks to force Server-Side Rendering (SSR) for real-time database queries in React Server Components. #NextJS #NextJS15 #ReactJS #WebDevelopment #Frontend #JavaScript #CleanCode #SoftwareEngineering #TechTips #WebArchitecture #WebDev