Fixing React Bug: Syncing Filter Values with URL Query Parameters

Stop disabling the exhaustive-deps linter in your React Effects ⚛️. we all did the same dirty hack: // eslint-disable-next-line 👇. It is the most common frustrating scenario in React development: You write a useEffect to connect to a websocket or track an analytics event. Inside that effect, you need to read the current value of a state variable—like a shopping cart count or a UI theme. But the moment you read that state, the React linter screams at you to add it to the dependency array. If you add it, your effect re-runs every time the state changes (destroying your websocket connection!). If you don't add it, your build fails. So, we all did the same dirty hack: // eslint-disable-next-line. React finally solves this permanently with useEffectEvent. ❌ The Legacy Way (eslint-disable): Forces you to break the rules of React. Creates a massive risk for stale closures and hidden bugs. Makes your code harder to maintain and review. ✅ The Modern Way (useEffectEvent): Extracts your "event" logic cleanly out of your "lifecycle" logic! • Always Fresh: It guarantees your callback will always read the absolute latest props and state. • Non-Reactive: It is intentionally ignored by the dependency array. It will never cause your useEffect to re-run. • Clean Code: You can finally turn your linter rules back on and trust your dependencies again. The Shift: We are moving away from fighting the framework and using dedicated primitives to separate reactive synchronization from non-reactive events. #ReactJS #React19 #WebDevelopment #Frontend #JavaScript #CleanCode #SoftwareEngineering #TechTips #WebDev #WebPerf #Tips #DevTips #ReactTips #FrontendDeveloper #DeveloperTips

💡 Lesson Learned Today: While working on implementing search functionality in a React + Redux application, I faced an issue where the search input was updating correctly… but the results were not filtered at all 🤔 After debugging, I discovered an important insight: 👉 Not every “search issue” comes from the frontend. ✔️ The request was being sent correctly ✔️ The search parameter was included in the API call ❌ But the backend endpoint didn’t support filtering with that parameter 🔍 What I learned: Always verify: Is the correct parameter name being sent? Is the backend actually using it? Check the Network tab before assuming the issue 🚀 Sometimes the best debugging skill is knowing where the problem is NOT. #FrontendDevelopment #React #Redux #Debugging #WebDevelopment #LearningJourney

🔥 Why useEffect Runs Twice in React Strict Mode If you’ve seen this while developing with React: JSX code : useEffect(() => { console.log("Effect ran"); }, []); You expect this to run once. But in development, the console shows: Effect ran Effect ran So… is React broken? Not really. 🧠 What’s Actually Happening When React Strict Mode is enabled, React intentionally runs some lifecycle logic twice in development. This includes useEffect. Why? Because React is checking if your effects are safe and predictable. 🔍 What React Is Testing React wants to detect bugs like: Side effects that are not cleaned up Code that relies on running only once Hidden memory leaks To do that, React: 1️⃣ Mounts the component 2️⃣ Runs the effect 3️⃣ Immediately unmounts it 4️⃣ Mounts it again If your cleanup logic is correct, everything still works. ✅ Example with Cleanup JSX code useEffect(() => { const id = setInterval(() => { console.log("running"); }, 1000); return () => clearInterval(id); }, []); This ensures no leftover side effects. 🎯 Important Note This only happens in development. Production builds run effects normally. #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #WebDevelopment #LearningInPublic

Topic: Stale Closures in React – The Hidden Bug You Don’t See Coming ⚠️ Stale Closures in React – The Bug That Looks Fine… Until It’s Not Your code works. No errors. No warnings. But suddenly… state behaves incorrectly 😐 Welcome to the world of stale closures. 🔹 What is a Stale Closure? When a function captures an old value of state instead of the latest one. 🔹 The Problem const [count, setCount] = useState(0); useEffect(() => { const interval = setInterval(() => { console.log(count); // ❌ always logs old value }, 1000); return () => clearInterval(interval); }, []); 👉 count is stuck at its initial value. 🔹 Why This Happens React closures capture values at render time, not at execution time. 🔹 Solutions ✅ 1. Add dependency useEffect(() => { console.log(count); }, [count]); ✅ 2. Use functional update setCount(prev => prev + 1); ✅ 3. Use useRef for latest value const countRef = useRef(count); countRef.current = count; 💡 Real-World Impact 👉 Timers 👉 WebSockets 👉 Event listeners 👉 Async callbacks 📌 Golden Rule If your logic depends on changing state, make sure it’s not using a stale snapshot. 📸 Daily React tips & visuals: 👉 https://lnkd.in/g7QgUPWX 💬 Have you ever debugged a stale closure issue for hours? 😅 #React #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #ReactHooks #DeveloperLife

📌 Today I learned: useReducer — React's powerful alternative to useState When state logic gets complex, useReducer brings structure and clarity. The core concept: ``` const [state, dispatch] = useReducer(reducer, initialState); ``` Instead of directly updating state, you dispatch **actions**. The reducer — a pure function — takes the current state + action and returns the next state. 🔑 Key benefits I discovered: → Centralised logic — all state transitions live in one function → Easier debugging — every state change has an explicit action → Scales better — perfect for complex UI with multiple transitions → More testable — reducers are just pure functions! UseReducer shines when: • You have 3+ related state variables • State updates depend on previous state • Multiple actions affect the same piece of state Think of it like Redux — but built right into React, no extra libraries needed. One day of learning, but the concept already feels foundational. Excited to keep building with it! 🚀 #ReactJS #useReducer #StateManagement #JavaScript #WebDevelopment #FrontendDev #LearningInPublic

🚀 Stop Managing State Manually — Let React Do the Heavy Lifting For a long time in React (especially React 17/18), handling form submissions meant writing extra logic: managing loading state, preventing default behavior, handling async calls manually… and repeating this pattern again and again. It worked — but it wasn’t elegant. Now with React 19, things are changing in a powerful way. ✨ With hooks like useActionState, React introduces a more declarative and streamlined approach: No more manual loading state management No need for repetitive event handling Cleaner and more readable components Built-in handling of async actions Instead of telling React how to handle everything step-by-step, we now focus on what we want — and let React take care of the rest. 👉 This shift is not just about writing less code. It’s about writing better code. Code that is: ✔ Easier to maintain ✔ Less error-prone ✔ More scalable ✔ More aligned with modern frontend architecture As developers, growth comes from unlearning old patterns and embracing better ones. 💡 The real question is: Are we just writing code that works… or are we writing code that evolves? #React19 #FrontendDevelopment #JavaScript #WebDevelopment #CleanCode #CodingJourney #SoftwareEngineering

Mastering React State with Hooks Ever felt like your React components are getting cluttered with too much state logic? Here’s a simple idea that can seriously clean things up: Custom Hooks What’s the big deal? Custom hooks let you extract and reuse stateful logic across components. Instead of repeating the same `useState` and `useEffect` logic everywhere, you write it once—and reuse it. Can they really halve your code? In many cases… YES. Imagine this: Instead of writing the same logic in 5 components, you move it into a custom hook like `useFetchData()` or `useFormHandler()`. Now you: Reduce duplication Make components cleaner Improve readability Make debugging easier Simple Example Before: Each component handles its own API call logic After: One custom hook handles everything Components just use it Why you should start using them Keeps your code DRY (Don’t Repeat Yourself) Makes scaling your app easier Encourages better structure Pro Tip Start small. Pick one repeated logic (like form handling or API calls) and convert it into a custom hook. #React #WebDevelopment #Frontend #JavaScript #Coding #SoftwareDevelopment

The Node.js Event Loop Explained (The Right Way) Here's the complete picture. The Core Truth is: For EVERY phase → Execute ONE macrotask → Execute ALL nextTick() → Execute ALL Promises → Move to next phase Why This Matters The Node.js event loop isn't a simple cycle like in browsers. It has 5 distinct phases, and microtasks run BETWEEN EVERY PHASE, not just once per loop. The 5 Phases: ⏱️ Timers — setTimeout, setInterval callbacks 📋 Pending Callbacks — Deferred I/O callbacks from the previous cycle 🔄 Poll — I/O events, network requests, file operations ✓ Check — setImmediate callbacks 🔚 Close — Socket and stream closures The Microtask Priority Here's the critical part: nextTick() ALWAYS runs before Promise callbacks. For each phase boundary: 1️⃣ process.nextTick() callbacks execute FIRST 2️⃣ Promise.then() callbacks execute SECOND 3️⃣ Then the next macrotask phase begins The Visualization The diagram shows the complete cycle with all phases and how microtasks fit between each one. Notice how every phase is followed by microtasks—this is the key difference from what most developers think. Drop a comment if this cleared it up! And if you've been caught by the I/O starvation bug, share your story 👇 #Node.js #JavaScript #EventLoop #Backend #WebDevelopment

I spent 3 hours fixing a React bug yesterday. The issue wasn’t complex. My approach was. Earlier, whenever something broke in my app, I used to: ❌ randomly change code ❌ refresh again and again ❌ search Stack Overflow immediately Now I follow a simple process: ✅ check component re-renders ✅ inspect props and state flow ✅ verify API response structure ✅ use console logs step-by-step And honestly, debugging became much faster. One thing I’m learning as a developer: Writing code is important. But understanding why code breaks is what actually improves your skills. Curious to know — what’s the toughest bug you fixed recently? #ReactJS #WebDevelopment #JavaScript #FrontendDevelopment #CodingJourney #FullStackDeveloper #MERN

💻 5 React mistakes I stopped making (and it improved my code a lot) When I started with React, I used to write code that worked… But not code that was clean, scalable, and maintainable. Here are 5 mistakes I fixed: ❌ 1. Writing everything in one component 👉 Now I break UI into small reusable components ❌ 2. Ignoring proper state management 👉 Learned when to use useState vs useEffect vs lifting state ❌ 3. Not handling performance 👉 Started using memoization (useMemo, useCallback) ❌ 4. Poor folder structure 👉 Now I follow a clean project structure ❌ 5. Debugging randomly 👉 Now I debug step-by-step with proper logs Small changes… but huge difference in code quality 🚀 Still learning every day 👨💻 Which mistake did you make the most? 😅 #ReactJS #FrontendDevelopment #JavaScript #CleanCode #WebDevelopment #SoftwareEngineer