Rohit Saluja’s Post

frameworks and libraries is all about syntax, the real deal is knowing what powers them... useEffect and useState are dangerous syntax to someone who doesn't understand how window loaded and DomContent event listeners work in pure javaScript... Axios is great but if you dont know how the fetch API works, the you would struggle to undertstand how the browser handles http errors... Knowing the fundamentals isn't about going back to the stone age, its what you need to build with confidence. #reactjs #frontend #javaScript

Me: “Why is this API calling 4 times???” 😭 React: “Because you forgot dependency array.” useEffect(() => { fetchData(); }); React: “No dependency array? Cool… I’ll run it on every render.” 💀 Moral of the story: Always respect the dependency array… or suffer the infinite loop. 🔁😂 #ReactJS #useEffect #FrontendLife #BugLife #JavaScript #DevHumor

Why Array Comparison in React State Is Tricky? If you’ve ever updated an array in React and your component didn’t re-render, you’re not alone. The reason? React compares state by reference, not by value. So if you modify the same array instead of creating a new one, React thinks nothing changed — even if the data inside it did. Never mutate state directly. Always create a new array or object when updating state. #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment

Today I want to share an amazing React feature that many developers don't know about. It allows you to create components using a class instead of a function. This gives you access to powerful tools like lifecycle methods, this.state, and this.setState(). 2026 is the new 2016 🤣 #React #JavaScript #Frontend #WebDevelopment #SoftwareEngineering

Most performance issues come down to one thing: Unnecessary Re-renders. React is fast, but it’s not magic. If you don't manage how and when your components update, your DOM will pay the price. In this carousel, I break down: The 4 core triggers of a re-render. The 'Waterfall Effect' in parent-child relationships. How to stabilize your code using professional patterns." #ReactJS #WebDevelopment #JavaScript #FrontendPerformance #MERNStack #ReactHooks #ZhairAhmad #SoftwareEngineering

Built a Password Generator using React while learning React Hooks in depth. Worked with useState, useEffect, useCallback, and useRef to understand state management, DOM access, and performance optimization in a practical way. #ReactJS #WebDevelopment #Frontend #LearningInPublic #JavaScript

Why does this log 1, not 2? Most people say: “Because React batches updates.” That’s only half the story. The real reason? Stale closures. Inside this render, count is 0. Both setCount(count + 1) calls use that same captured value. So React receives: 1) set to 1 2) set to 1 Not: 1) set to 1 2) set to 2 This question isn’t about memorizing hooks. It tests whether you understand how React renders create new function scopes — and how state updates are queued. #react #javascript #frontend

𝐍𝐞𝐱𝐭.𝐣𝐬 𝐜𝐨𝐝𝐞 𝐟𝐞𝐥𝐭 𝐬𝐩𝐚𝐠𝐡𝐞𝐭𝐭𝐢 𝐭𝐨 𝐦𝐞 𝐚𝐭 𝐟𝐢𝐫𝐬𝐭 It was hard to tell what runs on the server (like server actions inside a component) and what runs on the client, blurring separation of concerns (VISUALLY). But once you understand it, it will make you think more like a full-stack developer, seeing the system as a whole. #nextjs #javascript #reactjs #webdevelopment #softwareengineering

When using splice() in #ReactJS to update an array state variable, I ran into unexpected behavior. Instead, using a newer #JavaScript method called toSpliced() and updating the array with the useState, was able to fix this. I could have just copied the array, spliced the copy, and then set the state value of the array to equal the spliced copy, but toSpliced() seemed simpler. The toSpliced() method is supported in all major browsers as of 2023. Before trying splice() and toSpliced(), I had a filter function, as can be seen in the included code snippet from the relevant commit.

Mastering State Management in React! ⚛️ I recently dove deep into React Hooks, specifically useState and useEffect, to build this functional To-Do List. It’s one thing to understand the syntax, but another to implement: ✅ CRUD Operations: Adding, Editing, and Deleting tasks seamlessly. 💾 Persistence: Using localStorage via useEffect so your data doesn't vanish on refresh. 🔄 Conditional Rendering: Handling UI states for "Edit" vs "Add" modes. Check out the video to see the logic behind the UI! #ReactJS #WebDevelopment #FrontendEngineer #Javascript #ReactHooks #CodingLife #PortfolioProject