React: Avoid Passing setState Directly to Child Components

⚛️ React Tip: When Should You Use useCallback? While working on React applications, one common performance issue developers face is unnecessary component re-renders. One hook that often comes up in this discussion is useCallback. But many developers (including me earlier) either overuse it or use it incorrectly. So here’s a simple way to understand it. 🔹 What does useCallback do? `useCallback` memoizes a function. This means React will reuse the same function instance unless its dependencies change. Example 👇 const handleClick = useCallback(() => { console.log("Button clicked"); }, []); Without `useCallback`, a new function is created every time the component re-renders. Most of the time this isn’t a problem. But it becomes important when passing functions to memoized child components. 🔹 Example scenario Imagine a parent component passing a function as a prop to a child component wrapped with `React.memo`. If the function reference changes on every render, the child component will also re-render unnecessarily. Using `useCallback` helps keep the function reference stable, preventing those extra renders. 🔹 When should you actually use it? ✅ When passing callbacks to memoized components ✅ When the function is a dependency in another hook ✅ When optimizing large component trees ⚠️ When NOT to use it: • For every function in your component • When there is no performance issue • Just because someone said it improves performance 💡 One important lesson I’ve learned: Optimization should be intentional, not automatic. React already does a lot of work under the hood. Use hooks like `useCallback` only when they actually solve a problem. Curious to hear from other developers 👇 Do you use `useCallback` often, or do you prefer optimizing only after profiling? #reactjs #frontenddevelopment #javascript #webdevelopment #reacthooks #softwareengineering #coding

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

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

The difference between a good React developer and a great one? Knowing when to extract logic — and what pattern to reach for. Here's what I've been learning about React composition 👇 🔗 Custom hooks share logic — Every component calling useFetch gets its own independent state. If you want a shared state, that's Context or a state manager. Custom hooks are about reusing behaviour — not syncing data. ⚡ useFetch — three things most engineers miss. Never make the effect itself async. Always check res.ok — fetch doesn't throw on 404 or 500. Use AbortController to cancel stale requests when the URL changes. 🎯 useDebounce — the cleanup IS the magic. The return () => clearTimeout(timer) isn't just cleanup. It's the mechanism that makes debouncing work. Every keystroke resets the timer. Without that cleanup function, it's not debouncing, it's just a delayed call. 🧩 Compound Components — built for design systems. A props blob tries to predict every use case upfront. Compound components let teams compose exactly what they need — zero changes to internals. The secret? Context sharing state between the parent and its sub-components. ⚖️ The decision framework I use Props for 1-2 levels. Context for slow-changing shared data — but split by concern or every consumer re-renders on every change. State manager for complex, frequent updates. React Query for anything that comes from an API. The best platform libraries give teams superpowers without making them think about the internals. Sharing one deep dive at a time. 🚀 #React #CustomHooks #FrontendEngineering #JavaScript #PlatformEngineering #WebPerformance

🚀 Mutable vs Immutable in JavaScript One concept every frontend developer should understand is immutability. When you mutate data directly, it changes the original object and can cause: ❌ Hard-to-track bugs ❌ Unexpected UI updates ❌ Broken change detection Instead, using immutable updates creates a new copy of the data, making your code: ✅ More predictable ✅ Easier to debug ✅ Better for React state management Example: Mutable ❌ "user.age = 26" Immutable ✅ "user = { ...user, age: 26 }" 💡 This small habit can make a big difference in React applications. 👨💻 Question for developers: Do you usually prefer A️⃣ Mutable updates B️⃣ Immutable updates Drop A or B in the comments 👇 #javascript #reactjs #frontenddevelopment #webdevelopment #coding #softwareengineering #programming #devcommunity

🚨 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

🔥 Stale Closure in React — A Common Bug You Must Know Ever faced a situation where your state is not updating correctly inside setTimeout / setInterval / useEffect? 🤯 👉 That’s called a Stale Closure --- 💡 What is happening? A function captures the old value of state and keeps using it even after updates. --- ❌ Example (Buggy Code): import { useState, useEffect } from "react"; function Counter() { const [count, setCount] = useState(0); useEffect(() => { setInterval(() => { console.log(count); // ❌ Always logs 0 (stale value) }, 1000); }, []); return ( <button onClick={() => setCount(count + 1)}> Count: {count} </button> ); } 👉 Why? Because the closure captured "count = 0" when the effect first ran. --- ✅ Fix (Correct Approach): useEffect(() => { const id = setInterval(() => { setCount(prev => prev + 1); // ✅ always latest value }, 1000); return () => clearInterval(id); }, []); --- 🎯 Key Takeaway: Closures + async code (setTimeout, setInterval, event listeners) = ⚠️ potential stale state bugs --- 💬 Interview One-liner: “Stale closure happens when a function uses outdated state due to how closures capture variables.” --- 🚀 Mastering this concept = fewer bugs + stronger React fundamentals #ReactJS #JavaScript #Frontend #InterviewPrep #Closures #WebDevelopment

#State Vs #Props ---> who controls the data? In React, state and props are two core concepts. Both deal with data… but they don’t behave the same. 🟪State : 1. Used to manage data within a component 2. Can be changed over time (mutable via useState) 3. Handles dynamic data & user interactions 4. Any change in state =>> triggers re-render 🟧Props (short for properties) : 1. Used to pass data from parent to child 2. Read-only (child cannot modify it) 3. Mostly used for passing data 4. Changes in parent data =>> can cause re-render in child 🟨In short : State --> controlled inside the component Props --> controlled by the parent A small difference… but it defines how your UI behaves. 🔖 Save this for later if you're learning React. #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #ReactDeveloper #MERNStack #CodingJourney #LearnToCode #SoftwareDevelopment #TechLearning #Programming

Why do we specifically pass 'props' into 'super(props)' in a React component constructor? It is one of those things many developers do out of habit without realizing the actual mechanism behind it. While calling 'super()' is a JavaScript requirement to initialize the 'this' keyword, passing 'props' is a very specific React requirement for the constructor phase. The reason is simple: visibility. When you call 'super(props)', you are telling the parent 'React.Component' class to initialize 'this.props' for you immediately. If you only call 'super()' without the argument, 'this.props' will be undefined inside the constructor. React eventually assigns props to the instance anyway, but that happens after the constructor has finished running. If your logic requires you to access a property or compute a state based on a prop right inside the constructor, forgetting the 'props' argument will crash your logic. You would be trying to read from a variable that hasn't been wired up to the instance yet. Even though modern React code bases have shifted to Functional Components where this ceremony is gone, the underlying logic of when data becomes available to an instance is a core part of the library’s history. It is a small detail that perfectly illustrates how React works under the hood. #ReactJS #Javascript #SoftwareEngineering #FrontendDevelopment #WebDev #CodingTips

Most React devs think RSC is about performance. It's not. It's about where your code lives. React Server Components let you fetch data, access your database, and keep secrets — all at the component level — without shipping a single byte of that logic to the browser. Here's the mental shift that changed how I think about it: → Not "how do I make this faster?" → But "does this actually need to run in the browser?" If the answer is no — it belongs on the server. The "use client" directive isn't a default. It's an opt-in for interactivity. Everything else? Server by default. What this unlocks: ✅ Direct DB calls inside components ✅ API keys that never touch the client ✅ Smaller JS bundles without the effort ✅ Cleaner data fetching — no useEffect waterfalls The hardest part isn't the syntax. It's unlearning the habit of reaching for "use client" everywhere. If you're building with Next.js 13+ and haven't fully leaned into RSC yet — start small. Pick one data-fetching component and move it to the server. You'll feel the difference immediately. 💬 Are you using React Server Components in production? What's been your biggest challenge? #ReactServerComponents #React #NextJS #Frontend #WebDevelopment #JavaScript #SoftwareEngineering #Programming #TechTips #ReactJS