Farooq Khan’s Post

Stop Using useCallback Everywhere ⚠️ (Most React Devs Get This Wrong) I used to wrap every function inside useCallback thinking I was optimizing performance. Turns out… I was just adding unnecessary complexity. Here’s the truth 👇 👉 useCallback does NOT make your app faster by default 👉 It only helps in very specific scenarios 🧠 When useCallback is USEFUL Use it only if ALL 3 are true: You pass the function to a child component That child is wrapped with React.memo You want to avoid unnecessary re-renders ❌ When it's USELESS If you're doing this inside a hook or component: Not passing functions to children ❌ No memoized components ❌ No real performance issue ❌ 👉 Then useCallback is just noise 🚨 Classic Mistake const reset = useCallback(() => setCount(initialValue), []); Looks fine? It’s actually a bug. 👉 initialValue is missing from dependencies 👉 Your function can become stale ✅ Clean & Better Approach const increment = () => setCount(prev => prev + 1); const decrement = () => setCount(prev => prev - 1); const reset = () => setCount(initialValue); Simple. Readable. Correct. ⚡ Real Performance Insight Without useCallback: → Parent re-render = Child re-render ❌ With useCallback (and React.memo): → Child skips unnecessary re-renders ✅ 🎯 Final Takeaway “Don’t optimize blindly. Optimize where it actually matters.” Write clean code first. Measure performance later. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #PerformanceOptimization #CleanCode #SoftwareEngineering #ReactHooks #TechCareers #Developers

🚀 From Zero to React Master — My Complete Roadmap I stopped learning React randomly… and started following a structured roadmap. Here’s the exact path I’m using to go from basics to expert level 👇 🔹 Phase 1 — Foundation JSX, Components, Props, useState, Event Handling, Forms, Lists & Conditional Rendering 👉 Goal: Build strong core understanding 🔹 Phase 2 — Core Hooks useEffect, useRef, useContext, useReducer, useMemo, useCallback 👉 Goal: Master how React actually works under the hood 🔹 Phase 3 — Advanced React Lifecycle, Performance Optimization, Code Splitting, Portals, HOC, Virtual DOM 👉 Goal: Think like a senior developer 🔹 Phase 4 — Expert Level State Architecture, Server Components, Testing, SSR, Accessibility 👉 Goal: Production-level expertise 🔹 Phase 5 — Ecosystem & Real Projects React Router, Redux Toolkit, React Query, Next.js, Auth, Real Projects 👉 Goal: Become job-ready 🚀 💡 Key Lesson: Random tutorials don’t make you a developer. Structured learning + real projects = Real growth I’m currently following this roadmap daily and building projects alongside. If you're learning React, this might help you stay on track 💪 #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #ReactDeveloper #LearnToCode #CodingJourney #SoftwareDeveloper #100DaysOfCode #ReactLearning #NextJS #Redux #ReactQuery #Developers #TechCareer #Programming #CodeNewbie #SelfTaughtDeveloper #FullStackDeveloper #TechGrowth

🚀 Starting a 10-part series on React things that make code harder than it needs to be. Not tutorials. Not “10 hooks you should know.” Just real patterns that show up in actual codebases and make simple work more annoying than it should be. Part 1: A lot of React problems are really state problems. Not React itself. Not JSX. Not even hooks most of the time. State living in too many places. Duplicated state. State doing jobs it was never supposed to do. That’s usually when an app starts feeling harder to reason about than it should. The more I work with React, the more I think good frontend code starts with good state decisions. If the state is messy, everything downstream gets harder: debugging feature work testing handoffs even basic collaboration Good React usually feels predictable. And predictable usually starts with state. What’s the most common state mistake you keep seeing? #React #ReactJS #StateManagement #FrontendEngineering #JavaScript #TypeScript #SoftwareEngineering

🚀 Mastering React Hooks! 🚀 Ever wondered how to manage state in functional components? React Hooks is the answer! They allow you to add state and other React features to functional components without writing a class. Super convenient, right? 🤩 For developers, mastering React Hooks opens up a whole new world of possibilities in simplifying component logic and making code more readable. So let's dive in step by step: 1️⃣ First, import { useState } from 'react' 2️⃣ Then, declare a state variable using useState hook 3️⃣ Use the state variable and a function to update it Here's an example: ```jsx import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); } ``` Pro Tip: Remember to always keep the dependencies array updated to avoid unwanted re-renders! 🌟 Common Mistake Alert: Forgetting to pass all dependencies to the dependencies array can lead to unexpected bugs, so be thorough in checking! ❗️ Ready to level up your React game with Hooks? What cool projects are you planning to build using React Hooks? 💡🛠️ #ReactHooks #JavaScript #WebDev #FrontendDevelopment #StateManagement #LearnToCode #CodeNewbie #TechTips #tharindunipun.lk

when I first started React I was so confused about useState and useEffect like what is the difference and when do I use which one so let me explain both with one simple real example 👇 imagine you are building a weather app that fetches weather data when the page loads here is how useState and useEffect work together in that const [weather, setWeather] = useState(null) useEffect(() => {  fetch('https://lnkd.in/g7JkAAtU')   .then(res => res.json())   .then(data => setWeather(data)) }, []) that is it. two hooks. one job each. useState stores the weather data useEffect fetches it when the component loads simple way to remember it 👇 useState = where you keep your data useEffect = where you do something when something happens when I understood this everything in React started making sense if you are just starting React and feeling confused about these two, save this post. you will need it 🙌 anything else in React that confused you when you started? drop it in the comments 👇 #React #JavaScript #Frontend #WebDev #ReactJS #100DaysOfCode #Programming #LearnToCode

A small mistake I used to make in React: Re-rendering components more than needed. At first, I didn’t think much about it — everything was “working fine.” But as components grew, I started noticing: • Unnecessary re-renders • Slower UI updates • Harder debugging What helped me improve: • Using React.memo for pure components • Avoiding inline functions/objects where not needed • Proper use of useCallback and useMemo • Avoiding unnecessary useEffect usage • Managing dependency arrays correctly • Keeping state as minimal as possible Big learning: 👉 Just because it works doesn’t mean it’s efficient. Performance issues often come from small habits, not big mistakes. Still learning, but being mindful of re-renders and side effects has made a noticeable difference. What’s one React mistake you fixed that improved performance? #reactjs #javascript #webdevelopment #frontend #fullstackdeveloper

There's a page in the React docs called "You Might Not Need an Effect." I'd say it's one of the most important pages in the entire React documentation. And most developers have either never read it or read it once and moved on. The whole idea comes down to one question: is your code syncing React with something React doesn't control? A WebSocket, a browser API, a third-party library? If yes, useEffect makes sense. If no, you're probably just adding extra renders and making your code harder to follow. Some patterns worth knowing: If you're deriving a value from props or state, just calculate it during render. No state, no effect needed. If you're responding to a user action like a click or form submit, put it in the event handler. The event handler already knows what happened. The effect doesn't. If you need to reset state when a prop changes, use the key prop. React will remount the component and reset everything automatically. If you're chaining effects where one sets state and triggers another, collapse all of it into a single event handler. React batches those updates into one render. If a child is fetching data just to pass it up to a parent, flip the flow. Let the parent fetch and pass it down. The rule the docs give is honestly the clearest way I've seen it put: if something runs because the user did something, it belongs in an event handler. If it runs because the component appeared on screen, it belongs in an effect. Every unnecessary useEffect is an extra render pass, an extra place for bugs to hide, and more code for the next person to untangle. Worth a read if you haven't: https://lnkd.in/gqUr7e_S How many effects in your current codebase do you think would actually pass that test? #ReactJS #Frontend #JavaScript #WebDevelopment #CleanCode

Most React developers think components re-render randomly. They don’t. React actually follows a Depth-First Traversal strategy — and once I understood this, a lot of React’s "weird" behavior suddenly started making sense. 👇 When React updates UI, it doesn't jump around the component tree. It dives deep first — parent → child → child — until it reaches the leaf node. Only then does it backtrack and move to the next sibling. Here’s how React traverses the tree: 🔹 Start from the Root React begins from the root — the top of your component tree. 🔹 Go Deep (Child by Child) It keeps moving downward — first child → next child → until the deepest node. 🔹 Backtrack & Move to Sibling Once React hits a leaf, it goes back to the parent, checks for siblings, and repeats. Now here’s why this matters: ⚡ Fast & Predictable React walks the tree in O(n) — touching each node only once. 🧠 Smart Diffing • If element types change (div → span), React replaces the subtree • For lists, keys help React reuse and reorder nodes efficiently Now the interesting part 👇 This traversal existed even before React Fiber (pre-React 16). But earlier, reconciliation was all-or-nothing. Large component trees could block the main thread and hurt performance. With React 16 (Fiber), traversal became: ⏸️ Interruptible React can pause rendering to handle high-priority updates (like user input) 🔄 Incremental It resumes from where it left off — instead of restarting everything So yes, Depth-First Traversal was always there. React Fiber just made it work with time, not against it. I recently started digging deeper into React internals, and honestly, it’s changing how I structure components and debug performance issues. If you're also exploring React beyond hooks and state — we're probably like-minded. Let’s connect and learn together 🚀 #React #ReactJS #Frontend #WebDevelopment #JavaScript #ReactFiber #SoftwareEngineering #FrontendDevelopment #ReactInternals

🚀 Building with React: Lessons from Real Projects. Working with React has taught me that building modern applications is not just about designing interfaces it’s about managing data flow, scalability, and performance. Through hands-on experience with React, Redux, and API integration, I’ve learned the importance of: ✔ Creating reusable and modular components ✔ Managing application state efficiently with Redux ✔ Handling API calls and asynchronous data effectively ✔ Maintaining clean and scalable project structures These practices not only improve the performance of an application but also make it easier for teams to collaborate and maintain the codebase. Frontend development continues to evolve rapidly, and it’s exciting to keep learning and building solutions that create real impact. #ReactJS #Redux #FrontendDevelopment #JavaScript #SoftwareEngineering

Writing React is easy. Thinking in React is hard. Most beginners can write components, use hooks, and make things work. But when apps grow, things start to feel messy and confusing. That’s because React is not just about code it’s about how you think. Here’s a simple way to start thinking in React: • UI = a function of state Don’t manually change the UI. Change the state, and let React update the UI. • Break UI into components Think in small, reusable pieces not one big file. • Data flows down Pass data via props. Avoid unnecessary shared or global state. • Keep state minimal Only store what is needed. Derived data should not be state. • Avoid unnecessary effects If something can be calculated during render, don’t use useEffect. When you shift your mindset from “how to update the DOM” → “how state drives UI” everything becomes clearer. React becomes simpler when your thinking is clear. Next time you build something, ask: “Is my UI correctly reflecting my state?” #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #Developers