Optimize useEffect with useMemo for Stable Dependencies

🚀 Day 17/30 – Custom Hooks (Deep Dive) Tired of repeating the same logic in multiple components? 🤔 Today I learned how to make React code reusable & clean ⚡ 👉 Custom Hooks Today I learned: ✅ Custom Hooks are reusable functions using React Hooks ✅ They help extract and reuse logic across components ✅ Must always start with "use" (naming convention) --- 💻 Problem: Same logic repeated in multiple components ❌ (e.g. fetching data, form handling) --- 💻 Solution: Create a custom hook ✅ --- 💻 Example: function useCounter() { const [count, setCount] = useState(0); const increment = () => setCount((prev) => prev + 1); const decrement = () => setCount((prev) => prev - 1); return { count, increment, decrement }; } function App() { const { count, increment, decrement } = useCounter(); return ( <> <h2>{count}</h2> <button onClick={increment}>+</button> <button onClick={decrement}>-</button> </> ); } --- 🔥 What actually happens: 1️⃣ Logic is written once inside custom hook 2️⃣ Any component can reuse it 3️⃣ Each component gets its own state --- 💡 Real Use Cases: - API fetching (useFetch) - Form handling (useForm) - Authentication logic - Debouncing input --- ⚡ Advanced Insight: Custom Hooks don’t share state ❌ 👉 They share logic, not data --- 🔥 Key Takeaway: Write logic once → reuse everywhere. Are you still repeating logic or using custom hooks? 👇 #React #CustomHooks #FrontendDevelopment #JavaScript #CleanCode

🧸 Closure — Story First Imagine: 👉 A child goes outside to play 👉 But he still remembers what’s inside his house That’s a closure. 👉 A function goes outside its original scope 👉 But still remembers variables from where it was created 🧠 Real Definition:- A closure is a javascript feature where a function remembers and can access variables from its outer (lexical) scope even after the outer function has finished executing. ⚙️ Behind the Scenes (JS Engine) 💡 Example:- function outer() {  let count = 0;  return function inner() {   count++;   console.log(count);  }; } const counter = outer(); counter(); counter(); 📦 Step 1: Global Execution Context Created 1- Stored in Call Stack 2- Memory allocated: outer → function counter → undefined ⚙️ Step 2: outer() is called 👉 New Execution Context created for outer :- Inside its memory: count = 0 inner = function() {...} 👉 Normally, when outer() finishes → its memory should be deleted ❌ BUT… 👉 JavaScript sees: “inner function is still using count” So it does something special: 🔥 Closure is Created 👉 JS keeps count alive in memory 👉 Even after outer() is finished This saved memory is called: 👉 Lexical Environment ⚡ Step 3: Execution counter(); → 1 counter(); → 2 👉 Because count is remembered (not destroyed) 🧠 Where is this stored? 👉 The closure data is stored in: Execution Context memory Referenced via Scope Chain Internally kept in Heap (because it persists) (Heap is a region of memory where JavaScript stores reference types like objects, arrays, and functions.) 🔥 Why Closures Matter (Real World) Data privacy (private variables) React hooks Callbacks Event handlers #JavaScript #FrontendDeveloper #WebDevelopment #CodingJourney

𝐌𝐚𝐬𝐭𝐞𝐫𝐢𝐧𝐠 𝐒𝐭𝐚𝐭𝐞 𝐋𝐨𝐠𝐢𝐜 & 𝐂𝐑𝐔𝐃 𝐎𝐩𝐞𝐫𝐚𝐭𝐢𝐨𝐧𝐬 ⚛️ Yesterday was about the "comeback," but today is about the "consistency." I spent my session diving into dynamic data management—building a Name Manager that handles full CRUD (Create, Read, Update, Delete) logic. To move from static pages to interactive apps, I focused on these three technical pillars: 🔹 𝐮𝐬𝐞𝐒𝐭𝐚𝐭𝐞 (𝐓𝐡𝐞 𝐌𝐞𝐦𝐨𝐫𝐲): In React, components reset on every render. useState acts as the persistent "brain," allowing the app to remember data even when the UI updates. I practiced using setter functions to trigger re-renders safely. 🔹 .𝐦𝐚𝐩() (𝐓𝐡𝐞 𝐔𝐈 𝐅𝐚𝐜𝐭𝐨𝐫𝐲): This is how we turn raw data into an interface. It loops through an array and transforms strings into interactive components. It’s the engine behind every dynamic list you see online. 🔹 .𝐟𝐢𝐥𝐭𝐞𝐫() (𝐓𝐡𝐞 𝐈𝐦𝐦𝐮𝐭𝐚𝐛𝐥𝐞 𝐃𝐞𝐥𝐞𝐭𝐞): React rule #1: Don't mutate state. Instead of "erasing" data from the original array, I used .filter() to create a brand-new copy. This is the secret to building predictable, bug-free applications. 𝐖𝐡𝐚𝐭 𝐈 𝐢𝐦𝐩𝐥𝐞𝐦𝐞𝐧𝐭𝐞𝐝 𝐭𝐨𝐝𝐚𝐲: ✅ Create: Added new entries using the Spread Operator [...]. ✅ Read: Rendered a dynamic, real-time list with .map(). ✅ Update/Delete: Built the logic to modify and remove specific items without breaking the state. 𝐓𝐡𝐞 𝐁𝐢𝐠 𝐓𝐚𝐤𝐞𝐚𝐰𝐚𝐲: In React, we don't modify the past; we create a fresh copy of the future! 🚀 #ReactJS #WebDevelopment #JavaScript #FrontendDeveloper #LearningInPublic

Who really owns your form data? In a standard HTML input, the DOM is the boss. It holds the value in its own internal memory, and you only "ask" for it when the user hits submit. But in React, we don't like hidden state. We want every piece of data to be explicit and predictable. This is where Controlled Components come in. In this pattern, the React state is the single source of truth. The input doesn't maintain its own value. Instead, you tell the input exactly what to display using the 'value' prop, and you update that value through an 'onChange' handler that modifies the state. The input is "controlled" because its behavior is entirely driven by the React component. Why go through this extra boilerplate? It gives you total coordination over the UI. Since the data lives in your state, you can perform instant field validation, disable the submit button based on specific criteria, or even format the user's input in real-time. There is no "syncing" issue between the DOM and your logic because they are never out of alignment. Of course, controlling every single character stroke in a massive form can feel like overkill. For simple, high-performance scenarios where you just need the data at the end, Uncontrolled Components using 'refs' might be faster. But for most applications, the predictability of a controlled flow far outweighs the cost of a few extra lines of code. It ensures that what the user sees is exactly what your application "knows". #ReactJS #SoftwareEngineering #WebDevelopment #FrontendArchitecture #CodingTips #Javascript

In 2026, the "React Hack" is simply Suspense + the use hook. ### 💻 The Code Shift: function UserProfile({ id }) {  const [user, setUser] = useState(null);  const [loading, setLoading] = useState(true);  useEffect(() => {   fetchUser(id).then(data => {    setUser(data);    setLoading(false);   });  }, [id]);  if (loading) return <Spinner />;  return <div>{user.name}</div>; } The 2026 "Clean" Way: // No state, no effect, no manual loading checks. function UserProfile({ userPromise }) {  const user = use(userPromise);   return <div>{user.name}</div>; } // Wrapped in a Parent <Suspense fallback={<Spinner />}>  <UserProfile userPromise={fetchUser(id)} /> </Suspense> Why this is a win: Readable Logic: The component only cares about the UI, not the lifecycle of the fetch. Streaming: The server starts sending HTML to the browser before the data is even finished loading. Less Bugs: No more "race conditions" where the wrong data shows up because an old fetch finished late. The best code is the code you don't have to write. Are you still a useEffect purist, or have you moved your data fetching to the server? Let's talk architecture below. 👇 #ReactJS #CleanCode #WebDevelopment #JavaScript #SoftwareEngineering #Frontend

Many developers confuse slice() and splice() in JavaScript. The difference is simple but important. 1️⃣ slice() — Creates a copy slice() returns a portion of an array without changing the original array. Example: const numbers = [10, 20, 30, 40, 50] const result = numbers.slice(1, 4) Result → [20, 30, 40] Original → [10, 20, 30, 40, 50] Use it when you want to extract data safely without modifying the source array. 2️⃣ splice() - Modifies the array splice() changes the original array. It can remove, add, or replace elements. Example 1 - Remove items: const numbers = [10, 20, 30, 40, 50] numbers.splice(2, 2) Result → [10, 20, 50] It removed 30 and 40 from the original array. Example 2 - Add Items : constnumbers= [10, 20, 50]; numbers.splice(2, 0, 30, 40); console.log(numbers); // [10, 20, 30, 40, 50] Explanation: It Start at index 2, Remove 0 items and Insert 30 and 40 Key Difference slice() → non-destructive (does not modify the array) splice() → destructive (modifies the array) Quick rule to remember slice → copy splice → change Understanding this small difference prevents many bugs, especially when working with React state and immutable data patterns. #javascript #webdevelopment #frontend #reactjs #programming

"How did adopting HTML-first frameworks like HTMX and Astro decrease our development time by 47%? Let's dive into the details. Do you believe in the power of progressive enhancement to redefine web application development? In my latest project, I shifted from a traditional JavaScript-heavy approach to embracing HTML-first frameworks. This shift isn't just about cutting down on JavaScript; it's about prioritizing user experience and accessibility. By building the core functionality in HTML and using HTMX to sprinkle interactivity, our team's bug rate dropped significantly. We lean into progressive enhancement, ensuring users with limited JavaScript capabilities still experience a functional site. Astro further streamlined this process, allowing us to deliver lightning-fast static sites with a reactive user experience when needed. In practice, this meant focusing first on HTML for the core page structure, then layering interactivity as needed. Here's a quick HTMX snippet that transformed our data fetching process: ```typescript import { fetchFromAPI } from './api'; document.querySelector('#my-button').addEventListener('click', async () => { const data = await fetchFromAPI('/endpoint'); document.querySelector('#output').textContent = data.result; }); ``` Using 'vibe coding' allowed us to prototype these enhancements rapidly, testing different levels of interactivity before full implementation. It challenged us to rethink our development workflow, prioritizing robust performance over feature bloat. How would you incorporate progressive enhancement in your current projects? Would you consider giving HTML-first frameworks a try? Let's hear your thoughts!" #WebDevelopment #TypeScript #Frontend #JavaScript

You’re still building forms manually from JSON? --- Every time I get a JSON response, I end up doing the same thing: → read structure → map fields → wire inputs → repeat… again --- It’s boring. It’s repetitive. And it shouldn’t exist in 2026. --- So I built something for myself: 👉 Paste JSON 👉 Get a working form instantly --- No setup. No backend. No config headaches. Just: JSON → UI --- Introducing: 🔧 JSON → Form (part of useSignal) 👉 https://lnkd.in/grSx-SEi --- It’s fully browser-native. Which means: - your data never leaves your machine - everything runs instantly - no dependency on any service --- This isn’t just a generator. It’s a way to: → skip repetitive UI work → prototype faster → actually focus on logic --- Try it once. You probably won’t go back to building forms manually. --- 💬 Curious — how are you handling JSON → forms today? #frontend #webdevelopment #javascript #reactjs #devtools #buildinpublic #productivity #developers #webdev

#111DaysOfLearningForChange Day 5: Today I implemented infinite scrolling in vanilla js using IntersectionObserver Object(API). #111DaysOfLearningForChange #CodeCodeCode for Change #MERN #React #frontend 🍀 js snippet: let i = 1; const parent = document.querySelector('.parent'); const footer = document.querySelector('.footer'); const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { footer.innerHTML = 'You saw meee'; } if (entry.intersectionRatio > 0.1) { entry.target.innerHTML += '<br>you saw 10% of me'; } if (entry.intersectionRatio > 0.5) { entry.target.innerHTML += '<br>you saw half of me'; } if (entry.intersectionRatio > 0.8) { entry.target.innerHTML = "<br>Keep going and <br>you won't see me"; } if (entry.intersectionRatio > 0.9) { entry.target.style.height = '20vh'; } if (entry.intersectionRatio == 1) { parent.innerHTML += `<div class="box">This is new Box - ${i++}</div>`; if (i > 25) { parent.innerHTML += `<div class="stop">Ok That's enough Scrolling</div>`; footer.remove(); } } }); }, { threshold: [0, 0.1, 0.5, 0.8, 0.9, 1], } ); observer.observe(document.querySelector('.footer'));

JS Object vs. Map: Why simple {} might be slow In JavaScript, we often default to using simple objects {} as dictionaries. Most of the time, it works just fine. But there’s a tipping point where choice of data structure directly impacts both performance and code maintainability. I recently refactored a module in one of Node.js services and here is why we should choose Map for heavy-duty tasks: Non-String Keys: In an Object, keys are limited to Strings or Symbols. In a Map, a key can be anything - an object, an array, or even a function. This is a game-changer for metadata caching. Performance: Map is specifically optimized for frequent additions and removals. If your service handles high-frequency data updates, the performance gap becomes noticeable. Predictable Iteration: Unlike Objects, Map always preserves the insertion order of elements. Built-in Size: No more Object.keys(obj).length. You get the size instantly with .size. The bottleneck: We needed to maintain an in-memory cache for user sessions where the key was a complex device configuration object. Initially, we used JSON.stringify(config) to create string keys. The result was massive CPU overhead on serialization and slower lookups as the cache grew. The solution: By switching to a Map, we used the configuration object itself as the key. No serialization, O(1) lookup time, and much cleaner code. #javascript #nodejs #backend #performance #cleancode #Map #datastructures