Anshul Tatware’s Post

💡 𝐑𝐞𝐚𝐜𝐭 𝐂𝐨𝐧𝐜𝐞𝐩𝐭 – 𝐏𝐫𝐨𝐩𝐬 ❓ Ever wondered how 𝐝𝐚𝐭𝐚 𝐟𝐥𝐨𝐰𝐬 between components in React? Today I learned about 𝐏𝐫𝐨𝐩𝐬, a core concept that makes React components reusable 🚀 🔹 Props are used to 𝐩𝐚𝐬𝐬 𝐝𝐚𝐭𝐚 𝐟𝐫𝐨𝐦 𝐩𝐚𝐫𝐞𝐧𝐭 𝐭𝐨 𝐜𝐡𝐢𝐥𝐝 𝐜𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭𝐬 🔹 They help build 𝐝𝐲𝐧𝐚𝐦𝐢𝐜 & 𝐫𝐞𝐮𝐬𝐚𝐛𝐥𝐞 𝐔𝐈 🔹 Props are 𝐫𝐞𝐚𝐝-𝐨𝐧𝐥𝐲  (cannot be modified by child component) In the attached example, name is passed as a 𝐩𝐫𝐨𝐩 from parent to child component 👇 What should I share next — useEffect with API call or custom hooks? 🤔 #ReactJS #JavaScript #Props #FrontendDevelopment #LearningInPublic #ReactDeveloper

💡 𝐑𝐞𝐚𝐜𝐭 𝐇𝐨𝐨𝐤 – 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭 (API Call + Dependency Array) ❓ How do we fetch data from an API in React 𝘄𝗶𝘁𝗵𝗼𝘂𝘁 𝗶𝗻𝗳𝗶𝗻𝗶𝘁𝗲 𝗿𝗲-𝗿𝗲𝗻𝗱𝗲𝗿𝘀? Today I learned how useEffect is used for 𝗔𝗣𝗜 𝗰𝗮𝗹𝗹𝘀 and how the 𝗱𝗲𝗽𝗲𝗻𝗱𝗲𝗻𝗰𝘆 𝗮𝗿𝗿𝗮𝘆 controls when the effect runs 🚀 🔹 𝗪𝗵𝘆 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁 𝗳𝗼𝗿 𝗔𝗣𝗜 𝗰𝗮𝗹𝗹𝘀? 👉 React re-renders components often 👉 API calls should 𝗻𝗼𝘁 𝗿𝘂𝗻 𝗼𝗻 𝗲𝘃𝗲𝗿𝘆 𝗿𝗲𝗻𝗱𝗲𝗿 👉 useEffect helps control this behavior 🔹 𝗞𝗲𝘆 𝗽𝗼𝗶𝗻𝘁𝘀: 🔹 useEffect is used to handle 𝘀𝗶𝗱𝗲 𝗲𝗳𝗳𝗲𝗰𝘁𝘀 🔹 API calls are usually written 𝗶𝗻𝘀𝗶𝗱𝗲 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁 🔹 The 𝗱𝗲𝗽𝗲𝗻𝗱𝗲𝗻𝗰𝘆 𝗮𝗿𝗿𝗮𝘆 decides 𝘄𝗵𝗲𝗻 useEffect runs 🔹 𝗪𝗵𝗮𝘁 𝗱𝗼𝗲𝘀 𝘁𝗵𝗲 𝗱𝗲𝗽𝗲𝗻𝗱𝗲𝗻𝗰𝘆 𝗮𝗿𝗿𝗮𝘆 𝗱𝗼? 👉 [] → runs 𝗼𝗻𝗹𝘆 𝗼𝗻𝗰𝗲 when the component mounts 👉 [id] → runs when 𝗶𝗱 changes 👉 No array → runs on 𝗲𝘃𝗲𝗿𝘆 𝗿𝗲𝗻𝗱𝗲𝗿 ❌ 📌 This is why the dependency array is 𝘃𝗲𝗿𝘆 𝗶𝗺𝗽𝗼𝗿𝘁𝗮𝗻𝘁. Next up: 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁 cleanup function or real-world API handling? 🤔 #ReactJS #JavaScript #useEffect #APICall #ReactHooks #FrontendDevelopment #LearningInPublic

useEffect is one of the most misunderstood hooks in React. It’s not for: • calculating derived values • syncing state with state • fixing re-render issues It is for: • data fetching • subscriptions • timers • syncing with browser or external systems If something can be calculated from existing state or props, it doesn’t belong in useEffect. The less effects you write, the more predictable your React code becomes. #react #frontend #javascript #webdev #cleanCode

🧠 A React Mistake That Looks Right (Until It Doesn’t) This code works. No errors. No warnings. And yet… it causes bugs. setCount(count + 1); setCount(count + 1); At first glance, it looks correct. But React doesn’t update state immediately. Both lines read the same old value. So instead of +2, you get +1. ✅ The correct approach setCount(prev => prev + 1); setCount(prev => prev + 1); Now React always uses the latest state. 🧠 What’s really happening State updates are queued React may batch them together Direct updates can become stale This is why functional updates exist. 🎯 Why interviewers love this concept Because it shows you understand: Asynchronous state updates Batching behavior Real-world React bugs Not just syntax. 📌 One rule to remember If your new state depends on the previous state, always use the functional form. #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #CleanCode #LearningInPublic

Ever seen this Express error and thought “I didn’t even do anything weird”…? ⚠️ “Cannot set headers after they are sent to the client” This usually happens when you send a response… but your function keeps running. So later, another res.send() / res.json() fires and Express is like: “Nope. You already responded.” The fix is simple: if (!user) {  return res.status(404).json({ message: "User not found" }); } That one return saves you from a surprisingly annoying bug. I’ve started treating return like a “hard stop” after every response. #Nodejs #Expressjs #BackendDevelopment #JavaScript #WebDevelopment

🚀 React Evolution : Class Components→Function Components React has come a long way! This illustration perfectly explains why Function Components + Hooks are now the preferred approach. 🔁 Old Way – Class Components - Multiple lifecycle methods ➡️ constructor ➡️ componentDidMount ➡️ componentDidUpdate ➡️ componentWillUnmount - Too many steps to manage state and side effects - More boilerplate, harder to maintain ✅ New Way – Function Components ➡️ One powerful hook: useEffect ➡️ Handles mounting, updating, and cleanup in one place ➡️ Cleaner syntax ➡️ Easier to read, test, and maintain ➡️ Better performance and developer experience 🧠 Think of it as: Many switches ➜ One smart button If you’re still using class components, now is the best time to start migrating and embracing modern React 🚀 #ReactJS #JavaScript #WebDevelopment #FrontendDevelopment #ReactHooks #useEffect #CleanCode #SoftwareEngineering #UIDevelopment #ModernReact #LearningReact

Just published a new article on the hidden cost of global stores in Vue. A practical breakdown of coupling, reactivity overhead, and when global state is still the right choice. 💬 Thoughts? Link in the first comment! #VueJS #FrontendDevelopment #JavaScript #StateManagement #WebPerformance

👉 Event Loop in Node.js JavaScript is single threaded, but Node.js can handle many tasks at the same time. This is possible because of the Event Loop. 👉 What Event Loop does -Continuously checks if the call stack is empty -Picks the next task from queues -Executes it without blocking the main thread 👉 How it works -Synchronous code runs in the call stack -Async tasks like timers, file system, and APIs go to background Once the stack is empty, Event Loop pushes tasks back to execution 👉 Execution order -Microtask queue → Promises, process.nextTick -Timers queue → setTimeout, setInterval -I O queue → file system, network calls -Check queue → setImmediate 👉 Why it matters -Handles thousands of requests efficiently -Keeps the application fast and non blocking 👉 Key point Node.js is single threaded, but highly concurrent because of the Event Loop. #nodejs #javascript #eventloop #backenddevelopment #webDevelopment

React performance tip that actually matters 🚀 Most re-render issues come from: ❌ Passing new objects/functions in props ❌ Unstable dependencies ❌ Unnecessary state Fix it with: ✅ memoization (when needed) ✅ stable handlers ✅ derived state 💬 Have you debugged re-renders before? Hashtags: #ReactJS #WebPerformance #FrontendEngineering #JavaScript #SoftwareDeveloper

Why most React developers misunderstand useEffect It's not a lifecycle method. It's not componentDidMount in disguise. And it's definitely not the place for derived state. useEffect is synchronization with an external system. 🔍 The mental model: useEffect = "After React commits to the screen, do this side effect" The dependency array = "Only re-run when THESE values differ" Cleanup function = "Before re-running OR unmounting, clean up" Common pitfall I see: JavaScript // ❌ Wrong: Using useEffect for computed values useEffect(() => { setFullName(`${firstName} ${lastName}`); }, [firstName, lastName]); // ✅ Right: Derived state should be... just stateless computation const fullName = `${firstName} ${lastName}`; useEffect is for: API calls Subscriptions Manual DOM manipulation Analytics/logging Not for: Things you can calculate during render. What's your useEffect horror story? Drop it below 👇 #ReactJS #JavaScript #FrontendEngineering #WebDev #CleanCode