Optimize React Performance with useMemo

Stop overusing useEffect: 3 patterns for cleaner React code in 2026! While useEffect is one of the most powerful hooks in React, it’s also the most misused. Many developers use it to sync state, leading to unnecessary re-renders and "spaghetti code." In my recent projects, I’ve been focusing on writing more predictable components by following these 3 patterns: 1) You might not need an effect for data transformation If you can calculate something from existing props or state, do it during rendering. - Don't: Use an effect to update a filteredList state when items change. - Do: Use useMemo or just a plain variable during render. It’s faster and simpler. 2) Action handlers over effects If a state change is triggered by a specific user event (like a button click), put that logic in the event handler, not in a useEffect watching the state. It makes the data flow much easier to trace. 3) Lifting State Up vs. Context API Don’t jump straight to Context for everything. Start by lifting state up to the nearest common ancestor. Only move to Context or state management libraries when the prop-drilling actually hurts scalability. The goal? Leaner components, better performance, and easier debugging. What’s a React "bad habit" you’ve recently broken? Let’s share some clean code tips below👇 #ReactJS #TypeScript #WebDevelopment #SoftwareArchitecture #CleanCode #FrontendEngineering #TorontoTech #MERN

#day53 Headline: 0ms Runtime | Beats 100% of JavaScript Submissions 🚀 Just cleared the "Single Element in a Sorted Array" challenge on LeetCode with $O(\log n)$ time complexity and $O(1)$ space. While a simple XOR approach works in $O(n)$, the real challenge was implementing a binary search that correctly navigates the even/odd index logic to find that one unique element in logarithmic time. There's a specific kind of satisfaction in seeing that "Beats 100%" metric. It's a reminder that in software engineering, the difference between "it works" and "it's optimal" is where the real fun begins. #LeetCode #JavaScript #DataStructures #Algorithms #CodingLife #Optimization #ProblemSolving

using shadcn/ui and react-hook-form is the best stack in the react ecosystem but it has one massive flaw which is It is incredibly verbose. every single text input in every application likely looks like this: <FormField  control={form.control}  name="first_name"  render={({ field }) => (   <FormItem>    <FormLabel>First Name</FormLabel>    <FormControl>     <Input placeholder="Enter first name" {...field} />    </FormControl>    <FormMessage />   </FormItem>  )} /> That is 12 lines of code for one input. If a form has 10 fields, your component balloons to 150+ lines of pure boilerplate. so how did i solve this? simply i made several reusable form molecules with strict JSDoc comments. This will allow replacing those 12 lines with a single, highly readable line: <SharedTextField control={form.control} name="first_name" label="First Name" /> the idea is very simple but from my experience most developer are too lazy to do this kind of solutions thinking it won't make any real difference :)

𝗡𝗼𝗱𝗲.𝗷𝘀 𝗨𝗻𝗱𝗲𝗿 𝘁𝗵𝗲 𝗛𝗼𝗼𝗱: 𝗧𝗵𝗲 𝗠𝗲𝗰𝗵𝗮𝗻𝗶𝗰𝘀 𝗼𝗳 𝘁𝗵𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗥𝘂𝗻𝘁𝗶𝗺𝗲 For years, I used Node.js to build backend services. But recently I stepped back and asked a deeper question: 𝐰𝐡𝐚𝐭 𝐚𝐜𝐭𝐮𝐚𝐥𝐥𝐲 𝐡𝐚𝐩𝐩𝐞𝐧𝐬 𝐛𝐞𝐡𝐢𝐧𝐝 𝐭𝐡𝐞 𝐬𝐜𝐞𝐧𝐞𝐬? Node.js is not just JavaScript running on a server. It’s a carefully designed system where several components work together to handle massive concurrency. At the core is the 𝐕𝟖 𝐄𝐧𝐠𝐢𝐧𝐞, which compiles JavaScript into machine code so it can run efficiently on your system. Then comes the 𝐄𝐯𝐞𝐧𝐭 𝐋𝐨𝐨𝐩, the heart of Node.js. It continuously checks tasks, processes callbacks, and ensures asynchronous operations don’t block the main thread. Behind that sits 𝐥𝐢𝐛𝐮𝐯, the library that enables non-blocking I/O. It manages the 𝐞𝐯𝐞𝐧𝐭 𝐪𝐮𝐞𝐮𝐞 and a 𝐭𝐡𝐫𝐞𝐚𝐝 𝐩𝐨𝐨𝐥 that handles heavier operations like file system tasks, encryption, and DNS lookups. This architecture is why Node.js can handle thousands of concurrent requests without creating a new thread for every user. Understanding these internals changes how you write backend code—it encourages asynchronous thinking and performance awareness. If you want to strengthen your backend fundamentals: * Learn how the event loop phases actually work * Understand when Node uses the thread pool * Avoid blocking operations in the main execution thread The deeper you understand the engine, the better your architecture decisions become. What backend concept are you exploring this week? Follow Muhammad Nouman for more useful content #NodeJS #JavaScript #BackendEngineering #EventLoop #SystemDesign #WebDevelopment #SoftwareEngineering #AsyncProgramming

👉 “Same data. Same values. Different render. Welcome to React’s reference equality.” You wrote the logic right. Your data didn’t change. But your component still re-renders… 🤯 Let’s break the illusion 👇 React doesn’t compare objects by value. It compares them by reference. So even if this looks identical: { value: 10 } !== { value: 10 } 👉 React sees it as changed 👉 Your useMemo runs again 👉 Your memoization breaks 👉 Performance takes a hit ⚠️ The Hidden Trap useMemo(() => { // runs every render 😬 }, [{ value: 10 }]); Every render = new object New object = new reference New reference = React thinks “changed” ✅ The Right Way ✔️ Use primitive dependencies ✔️ Extract specific fields 🧠 Golden Rule React is fast. But it trusts references, not intentions. 🎯 Final Thought Most React bugs aren’t in your logic… They’re in how React interprets your data. #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #SoftwareEngineering #ReactHooks #WebPerformance #CleanCode #Programming #Developers #TechCommunity #CodingLife #DevCommunity #LearnToCode #CodeNewbie #100DaysOfCode #DeveloperLife #TechTips #PerformanceOptimization #UIEngineering

𝗠𝗲𝗺𝗼𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝗶𝘀 𝗻𝗼𝘁 𝗮 "𝗳𝗿𝗲𝗲" 𝗽𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝘄𝗶𝗻. ⚡ It’s tempting to wrap every calculation in useMemo or every function in useCallback. But in a large-scale React application, this can backfire. 𝗧𝗵𝗲 𝗖𝗼𝘀𝘁 𝗼𝗳 "𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻": Every time you use these hooks, you aren't just saving a calculation. You are: 1. 𝗜𝗻𝗰𝗿𝗲𝗮𝘀𝗶𝗻𝗴 𝗺𝗲𝗺𝗼𝗿𝘆 𝘂𝘀𝗮𝗴𝗲: React must store the previous value and the dependency array in memory. 2. 𝗔𝗱𝗱𝗶𝗻𝗴 𝗲𝘅𝗲𝗰𝘂𝘁𝗶𝗼𝗻 𝗼𝘃𝗲𝗿𝗵𝗲𝗮𝗱: On every render, React must run a shallow comparison on every dependency. If you are memoizing a simple .filter() on a 50-item list, the "optimization" overhead is often more expensive than the re-calculation itself. 𝗪𝗵𝗲𝗻 𝘁𝗵𝗲 𝘁𝗿𝗮𝗱𝗲-𝗼𝗳𝗳 𝗺𝗮𝗸𝗲𝘀 𝘀𝗲𝗻𝘀𝗲: ✅ 𝗛𝗲𝗮𝘃𝘆 𝗖𝗼𝗺𝗽𝘂𝘁𝗮𝘁𝗶𝗼𝗻: Expensive data processing (e.g., parsing large JSON or complex regex) that actually blocks the main thread. ✅ 𝗥𝗲𝗳𝗲𝗿𝗲𝗻𝘁𝗶𝗮𝗹 𝗜𝗻𝘁𝗲𝗴𝗿𝗶𝘁𝘆: When passing objects or functions to children wrapped in React.memo. Without it, the child re-renders on every parent update, defeating the purpose of React.memo. ✅ 𝗘𝗳𝗳𝗲𝗰𝘁 𝗦𝘁𝗮𝗯𝗶𝗹𝗶𝘁𝘆: When the value is a dependency in a useEffect that triggers an API call or a heavy subscription. 𝗧𝗵𝗲 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝘆: Don't guess—measure. I’ve started using the 𝗥𝗲𝗮𝗰𝘁 𝗣𝗿𝗼𝗳𝗶𝗹𝗲𝗿 to identify "Wasted Renders" before reaching for a hook. Often, the better fix isn't memoization, but 𝘀𝘁𝗮𝘁𝗲 𝗰𝗼𝗹𝗹𝗼𝗰𝗮𝘁𝗶𝗼𝗻 or 𝗺𝗼𝘃𝗶𝗻𝗴 𝘁𝗵𝗲 𝘀𝘁𝗮𝘁𝗲 𝗱𝗼𝘄𝗻 the component tree. 𝗜𝗻 𝘆𝗼𝘂𝗿 𝗰𝘂𝗿𝗿𝗲𝗻𝘁 𝘀𝘁𝗮𝗰𝗸, 𝗮𝗿𝗲 𝘆𝗼𝘂 𝘀𝗲𝗲𝗶𝗻𝗴 𝗺𝗼𝗿𝗲 𝗽𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗴𝗮𝗶𝗻𝘀 𝗳𝗿𝗼𝗺 𝗺𝗲𝗺𝗼𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝗼𝗿 𝗳𝗿𝗼𝗺 𝗯𝗲𝘁𝘁𝗲𝗿 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗰𝗼𝗺𝗽𝗼𝘀𝗶𝘁𝗶𝗼𝗻? 👇 #ReactJS #WebPerformance #FrontendEngineering #JavaScript #ProgrammingTips #SoftwareDevelopment

🚀 Mastering Arrays in JavaScript: Understanding this fundamental data structure 📊 Arrays are collections of items stored in a single unit, allowing developers to store multiple values in a single variable. This makes it easy to organize and access related data efficiently in their code. For developers, understanding arrays is crucial as they are widely used in building applications to manage and manipulate data effectively. Let's break it down step by step: 1️⃣ Declare an array using square brackets [ ]. 2️⃣ Assign values to the array elements separated by commas. 3️⃣ Access elements by their index position, starting from 0. Full code example: ```javascript let fruits = ['apple', 'banana', 'orange']; console.log(fruits[0]); // Output: apple ``` Pro tip: Use array methods like 'push' and 'pop' to add or remove elements dynamically. Common mistake to avoid: Forgetting that array indices start at 0, leading to incorrect element access. 🌟 What's your favorite use case for arrays in your projects? Share below! 🌟 🌐 View my full portfolio and more dev resources at tharindunipun.lk #ArraysInJavaScript #DataStructures #WebDevelopment #JavaScriptTips #CodeNewbie #DevelopersCommunity #ArrayMethods #CodingSkills #tharindunipun

🚀 Learning Redux – Store Configuration with Redux Toolkit After understanding core Redux concepts, I explored how to set up and configure the Redux store using Redux Toolkit. 🔹 What is the Redux Store? The store is the central place where the entire application state is stored. Every component can access data from this single source of truth. 🔹 configureStore() (Redux Toolkit) Redux Toolkit provides a powerful function called configureStore() which simplifies the process of creating and managing the store. 🔹 Why use configureStore()? Automatically enables Redux DevTools for debugging Comes with built-in middleware like Redux Thunk Reduces boilerplate code compared to traditional Redux Makes setup faster and cleaner 🔹 How it works: We combine different slices (reducers) into a single store, so the application state is organized and scalable. 📌 Example: import { configureStore } from "@reduxjs/toolkit"; import counterReducer from "./counterSlice"; const store = configureStore({ reducer: { counter: counterReducer, }, }); 🔹 Key Benefit: It helps manage multiple parts of the application state in a structured and maintainable way. 💡 Key takeaway: configureStore is the modern and recommended way to set up Redux — making it simple, efficient, and production-ready. React + Redux concepts now feel much more practical and real-world ready ⚛️💪 #ReactJS #Redux #ReduxToolkit #StateManagement #FrontendDevelopment #JavaScript #LearningInPublic #ReactJourney

Just finished writing a deep dive blog on Node.js Architecture. Click Here 👉👉: https://lnkd.in/gsXv-rdg For the longest time, my understanding of Node.js was very simple: Node.js = JavaScript running on the V8 engine. And honestly, if someone had asked me this a month ago, I probably would have given the same answer. But once I started exploring the internals of Node.js, I realized how much more is happening behind the scenes. The deeper I went, the more fascinating it became. Node.js isn’t just V8. It’s a combination of multiple components working together: • V8 Engine – executes JavaScript • libuv – handles asynchronous I/O • Event Loop – coordinates execution • Thread Pool – processes background tasks • Node APIs – bridge JavaScript with system operations All of these pieces together create the non-blocking, event-driven architecture that makes Node.js so powerful for building scalable backend systems. I tried breaking down these concepts in a simple way in my latest blog, along with clearing some common misconceptions about Node.js. What started as curiosity quickly turned into genuine fascination with the engineering behind it. Learning a lot through the cohort and the community. #NodeJS #JavaScript #BackendDevelopment #SystemDesign #LearningInPublic #Chaicode Special thanks to the amazing mentors and community: Hitesh Choudhary Piyush Garg Chai Aur Code Akash Kadlag Suraj Kumar Jha