Optimize React Performance with Memoization Techniques

React Performance Tip: Stop Overusing useEffect — Use useQuery Instead One mistake I often see (and made myself earlier) while working with React apps is overusing useEffect for API calls. 👉 Typical approach: Call API inside useEffect Manage loading state manually Handle errors separately Re-fetch logic becomes messy This works… but it doesn’t scale well. 🔁 Better approach: Use React Query (useQuery) When I started using useQuery, it simplified a lot of things: ✅ Automatic caching ✅ Built-in loading & error states ✅ Background refetching ✅ Cleaner and more readable code 👉 Example: Instead of this 👇 useEffect(() => { setLoading(true); axios.get('/api/data') .then(res => setData(res.data)) .catch(err => setError(err)) .finally(() => setLoading(false)); }, []); Use this 👇 const { data, isLoading, error } = useQuery({ queryKey: ['data'], queryFn: () => axios.get('/api/data').then(res => res.data), }); 🔥 Result: Less boilerplate Better performance (thanks to caching) Easier state management 📌 Takeaway: If you're building scalable React applications, tools like React Query are not optional anymore — they’re essential. What’s one React optimization you swear by? Drop it in the comments 👇 #ReactJS #WebDevelopment #Frontend #JavaScript #SoftwareEngineering #CleanCode #TechTips #Developers

🚀Why Loading Too Much Data Can Break Your Application While working on an infinite scrolling feature in React, I came across an important real-world problem 👇 ❌ Problem: If the backend sends a very large amount of data at once, both the website and server start slowing down. 🔍 Why does this happen? ▪️ Large API responses take more time to transfer over the network. ▪️The browser struggles to render too many items at once. ▪️Memory usage increases significantly. ▪️Server load increases when handling heavy requests. 👉 I was using the GitHub API, and it helped me understand how important it is to control the amount of data being fetched. 📦 Solution: Pagination + Infinite Scrolling ▪️Instead of loading everything at once: ▪️Fetch data in smaller chunks (pagination) ▪️Load more data only when needed (infinite scroll). ⚡ Benefits: ▪️Faster initial load time ▪️Better performance ▪️Smooth user experience ▪️Reduced server stress 💡 What I learned: ▪️Efficient data fetching is crucial in frontend development ▪️Performance optimization matters as much as functionality ▪️Real-world applications are built with scalability in mind 🎯 Key takeaway: It’s not about how much data you can load — it’s about how efficiently you load it. #ReactJS #JavaScript #WebDevelopment #Frontend #Performance #LearningInPublic #CodingJourney

🚀 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

🚀 Understanding Forms in React — Simplified! Forms are a core part of almost every application. 👉 Login forms 👉 Signup forms 👉 Search inputs But handling them correctly in React is crucial. 💡 What are Forms in React? Forms allow users to input and submit data. In React, form handling is typically done using: 👉 Controlled Components 👉 State management ⚙️ Basic Example (Controlled Form) function Form() { const [name, setName] = useState(""); const handleSubmit = (e) => { e.preventDefault(); console.log(name); }; return ( <form onSubmit={handleSubmit}> <input value={name} onChange={(e) => setName(e.target.value)} /> <button type="submit">Submit</button> </form> ); } 🧠 How it works 1️⃣ Input value is stored in state 2️⃣ onChange updates state 3️⃣ onSubmit handles form submission 👉 React becomes the single source of truth 🧩 Real-world use cases ✔ Login / Signup forms ✔ Search bars ✔ Feedback forms ✔ Multi-step forms 🔥 Best Practices (Most developers miss this!) ✅ Always prevent default form reload ✅ Keep form state minimal ✅ Use controlled components for better control ❌ Don’t mix controlled & uncontrolled inputs ❌ Don’t store unnecessary form state ⚠️ Common Mistake // ❌ Missing preventDefault <form onSubmit={handleSubmit}> 👉 Causes full page reload 💬 Pro Insight Forms in React are not just inputs— 👉 They are about managing user data efficiently 📌 Save this post & follow for more deep frontend insights! 📅 Day 12/100 #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ReactHooks #Forms #SoftwareEngineering #100DaysOfCode 🚀

I was repeating the same logic in every component… and it started getting messy 😅 Yes, seriously. For a long time, I was doing this in React: useEffect(() => { fetchData(); }, []); const [data, setData] = useState(); const [loading, setLoading] = useState(false); Same pattern… in multiple components ❌ ⚠️ This caused: • Code duplication • Hard-to-maintain components • Bigger, messy files 💡 Then I changed my approach: Instead of repeating logic everywhere, 👉 I created a custom hook 🧠 Example: useFetch(url) Handles: • API call • Loading state • Error handling ✅ Result: • Cleaner components • Reusable logic • Easier maintenance 🔥 What I learned: If you’re repeating the same logic… you’re probably missing a custom hook. #ReactJS #FrontendDeveloper #JavaScript #CodingTips #WebDevelopment

⚛️ 𝗜𝗺𝗽𝗿𝗼𝘃𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 — 𝗨𝘀𝗶𝗻𝗴 𝗖𝗼𝗱𝗲 𝗦𝗽𝗹𝗶𝘁𝘁𝗶𝗻𝗴 As React applications grow, bundle size increases — which directly impacts initial load time. Common problem: • large JS bundle • slow first load • unnecessary code loaded upfront A better production approach is 𝗖𝗼𝗱𝗲 𝗦𝗽𝗹𝗶𝘁𝘁𝗶𝗻𝗴. ❌ 𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝗖𝗼𝗱𝗲 𝗦𝗽𝗹𝗶𝘁𝘁𝗶𝗻𝗴 𝘪𝘮𝘱𝘰𝘳𝘵 𝘋𝘢𝘴𝘩𝘣𝘰𝘢𝘳𝘥 𝘧𝘳𝘰𝘮 "./𝘋𝘢𝘴𝘩𝘣𝘰𝘢𝘳𝘥"; 𝘪𝘮𝘱𝘰𝘳𝘵 𝘙𝘦𝘱𝘰𝘳𝘵𝘴 𝘧𝘳𝘰𝘮 "./𝘙𝘦𝘱𝘰𝘳𝘵𝘴"; 𝘪𝘮𝘱𝘰𝘳𝘵 𝘚𝘦𝘵𝘵𝘪𝘯𝘨𝘴 𝘧𝘳𝘰𝘮 "./𝘚𝘦𝘵𝘵𝘪𝘯𝘨𝘴"; All components load upfront — even if not used immediately. ❌ 𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝗖𝗼𝗱𝗲 𝗦𝗽𝗹𝗶𝘁𝘁𝗶𝗻𝗴 𝘪𝘮𝘱𝘰𝘳𝘵 { 𝘭𝘢𝘻𝘺, 𝘚𝘶𝘴𝘱𝘦𝘯𝘴𝘦 } 𝘧𝘳𝘰𝘮 "𝘳𝘦𝘢𝘤𝘵"; 𝘤𝘰𝘯𝘴𝘵 𝘋𝘢𝘴𝘩𝘣𝘰𝘢𝘳𝘥 = 𝘭𝘢𝘻𝘺(() => 𝘪𝘮𝘱𝘰𝘳𝘵("./𝘋𝘢𝘴𝘩𝘣𝘰𝘢𝘳𝘥")); 𝘤𝘰𝘯𝘴𝘵 𝘙𝘦𝘱𝘰𝘳𝘵𝘴 = 𝘭𝘢𝘻𝘺(() => 𝘪𝘮𝘱𝘰𝘳𝘵("./𝘙𝘦𝘱𝘰𝘳𝘵𝘴")); 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘈𝘱𝘱() {   𝘳𝘦𝘵𝘶𝘳𝘯 (     <𝘚𝘶𝘴𝘱𝘦𝘯𝘴𝘦 𝘧𝘢𝘭𝘭𝘣𝘢𝘤𝘬={<𝘱>𝘓𝘰𝘢𝘥𝘪𝘯𝘨...</𝘱>}>       <𝘋𝘢𝘴𝘩𝘣𝘰𝘢𝘳𝘥 />       <𝘙𝘦𝘱𝘰𝘳𝘵𝘴 />     </𝘚𝘶𝘴𝘱𝘦𝘯𝘴𝘦>   ); } Now components load 𝗼𝗻𝗹𝘆 𝘄𝗵𝗲𝗻 𝗻𝗲𝗲𝗱𝗲𝗱. 📌 Where this helps most: • large dashboards • admin panels • multi-page apps • heavy third-party libraries 📌 𝗣𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝗼𝗻 𝗕𝗲𝗻𝗲𝗳𝗶𝘁𝘀: • faster initial load • reduced bundle size • better performance • improved user experience 📌 𝗕𝗲𝘀𝘁 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗲𝘀: • split at route level • avoid over-splitting • use meaningful fallbacks • monitor bundle size Loading everything at once works — but splitting wisely improves performance significantly. 💬 Curious — do you apply code splitting at route level or component level? #ReactJS #CodeSplitting #Performance #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #Optimization

What happens when a user sends a request to your NestJS application and it takes too long to respond, causing the client to timeout and retry the request multiple times. This can lead to a flood of duplicate requests hitting your server, which can be catastrophic for performance and data consistency. To mitigate this, you can use a technique called idempotence, where you design your API endpoints to produce the same result no matter how many times they are called with the same input. ```javascript // Example of idempotent controller in NestJS import { Controller, Post, Body } from '@nestjs/common'; @Controller('payments') export class PaymentsController { @Post() makePayment(@Body() paymentData: any) { // Idempotent operation const paymentId = paymentData.paymentId; // Check if payment is already processed if (this.isPaymentProcessed(paymentId)) { return { message: 'Payment already processed' }; } // Process payment this.processPayment(paymentId); return { message: 'Payment successful' }; } } ``` By making your API endpoints idempotent, you can prevent duplicate requests from causing issues with your application. What strategies do you use to handle duplicate requests in your applications? 💬 Have questions or working on something similar? DM me — happy to help. #NestJS #NodeJS #Idempotence #APIDesign #BackendDevelopment #SoftwareEngineering #PerformanceOptimization #DuplicatesRequestHandling #APIEndpoints

useState is not for everything. Most React developers make this mistake without even realizing it. They use useState for everything that needs to "store" data. And then wonder why their app re-renders so much. This is Post 9 of the series: 𝗥𝗲𝗮𝗰𝘁 𝗨𝗻𝗱𝗲𝗿 𝘁𝗵𝗲 𝗛𝗼𝗼𝗱 Where I explain what React is actually doing behind the scenes. Here's what actually happens under the hood: 🔵 useState → triggers re-render every time it changes. React watches it. UI updates. But every update = a full render cycle. 🟢 useRef → stores data silently Value persists. But React has no idea it changed. No re-render. 🔴 let variable → resets every single render No persistence. No re-render. Just... gone. Same goal. Very different behaviors. A real-world mistake I see all the time: // ❌ Wrong const [timerId, setTimerId] = useState(null) // ✅ Right const timerRef = useRef(null) Storing a timer ID in state? That causes an unnecessary re-render for data your UI doesn't even show. The simple rule I follow now: 🧠 If it affects the UI → useState 🤫If it's silent data → useRef ⚡ If it's temporary → let variable Wrong choice = silent bugs. Right choice = cleaner, faster React. Next post: useMemo, useCallback, and when React.memo actually helps. Follow Farhaan Shaikh if you want to understand React more deeply. 👉 Read the previous post: Side effects of useEffects: https://lnkd.in/dGGw65aV #React #ReactJS #Frontend #WebDevelopment #JavaScript #BuildInPublic #LearnInPublic #ReactUnderTheHood #FrontendDevelopment #WebDev

# express.json() significance? 1) The one line that makes your backend actually work. 2) You write your POST route. You send data from frontend. You console.log(req.body). >>>undefined. - No error. No clue. Just silence. 3) Here's what's happening: Your frontend sends JSON, but Express receives it as a raw stream of bytes. It has no idea what to do with it. express.json() is the middleware that reads that stream, sees Content-Type: application/json, parses it, and puts it on req.body. // Without it req.body → undefined // With it req.body → { name: "myName", email: "myEmail@gmail.com" } #ExpressJS #NodeJS #JavaScript #Backend #MERN #WebDevelopment

🚀 Understanding useRef in React — Simplified! Not all data in React should trigger a re-render. 👉 That’s where useRef becomes powerful. 💡 What is useRef? useRef is a hook that lets you store a mutable value that persists across renders—without causing re-renders. ⚙️ Basic Syntax const ref = useRef(initialValue); 👉 Access value using: ref.current 🧠 How it works Value persists across renders Updating it does NOT trigger re-render Works like a mutable container 🔹 Example const countRef = useRef(0); const handleClick = () => { countRef.current += 1; console.log(countRef.current); }; 👉 UI won’t update—but value persists 🧩 Real-world use cases ✔ Accessing DOM elements (focus, scroll) ✔ Storing previous values ✔ Managing timers / intervals ✔ Avoiding unnecessary re-renders 🔥 Best Practices (Most developers miss this!) ✅ Use useRef for non-UI data ✅ Use it for DOM access ✅ Combine with useEffect when needed ❌ Don’t use useRef for UI state ❌ Don’t expect UI updates from it ⚠️ Common Mistake // ❌ Expecting UI update countRef.current += 1; 👉 React won’t re-render 💬 Pro Insight 👉 useRef = Persist value without re-render 👉 useState = Persist value with re-render 📌 Save this post & follow for more deep frontend insights! 📅 Day 14/100 #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #useRef #WebDevelopment #SoftwareEngineering #100DaysOfCode 🚀