React useEffect with correct dependency array

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 18/30 I clicked “Add Item”… nothing happened 😐 No error. No warning. Button worked. My code: items.push("New Task") setItems(items) The array DID change. But React didn’t update UI. Why? Because React doesn’t check contents. React checks references. Same array reference = React thinks nothing changed. Fix 👇 setItems([...items, "New Task"]) Create a NEW array instead of modifying the old one. This single mistake causes many: “React state not updating” moments. Save this — you will hit this bug in a real project. #30DaysOfCode #reactjs #javascript #frontend #codeinuse

🚀 Today I Learned: React Lifecycle (Class vs Functional Components) Today I spent some time understanding how React components live, update, and disappear inside an application. This concept is called the React Lifecycle. Every component in React goes through three main phases: 🔹 Mounting – When a component is created and added to the DOM for the first time. In class components this involves steps like the constructor, rendering the UI, and then running logic after the component is mounted. 🔹 Updating – This phase happens whenever state or props change. React re-renders the component and updates the DOM with the new changes. 🔹 Unmounting – This is when a component is removed from the DOM. Any cleanup logic should happen here. One interesting thing I realized is how functional components handle lifecycle differently compared to class components. Instead of multiple lifecycle methods, functional components mainly rely on effects and dependencies to control behavior during mounting, updating, and unmounting. 💡 My key takeaway today: Even though the implementation looks different in class and functional components, the core lifecycle phases remain the same — Mount → Update → Unmount. Understanding this makes it much easier to reason about when and why React components run certain logic. Learning React step by step and connecting these concepts is starting to make the framework feel much more intuitive. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #LearningInPublic #100DaysOfCode #DeveloperLife #Coding #BuildInPublic #CodingChallenge #FrontendDeveloper #DeveloperJourney #WebDevCommunity #MERNStack #Consistency #TechLearning #FullStack

Most developers still cling to Options API habits, but the Composition API is rewriting the rules on code reuse and component organization in Vue. Switching to Composition API helped me break down complex components into smaller, focused functions. I used to struggle with mixins causing unexpected side effects—now, each piece of logic lives in its own composable. This clarity makes debugging and testing easier, especially in bigger projects where scaling code can get messy fast. Plus, sharing logic between components feels cleaner and less error-prone. If you haven't tried converting a component yet, start small: extract reactive state or lifecycle hooks into a composable and import it where needed. How did you handle reusing logic before? Did the transition to Composition API feel smoother or more confusing? #VueJS #JavaScript #FrontendDev #WebDevelopment #ProgrammingTips #CodeReuse #CompositionAPI #DevWorkflow #Technology #SoftwareDevelopment #Coding #VueJS #CompositionAPI #JavaScript #ReusableLogic #Solopreneur #ContentCreator #FounderLife #Intuz

Late post, but no skipped week.  Week 3 of my full stack journey was a lot: → React Part I - JSX, Virtual DOM, first components → Async JS - Promises, async/await, Fetch API, built a Film Finder with a live API → JavaScript Testing - Mocha, TDD, writing tests before writing code → JS Classes, Modules & Error Handling - the building blocks of real, organized codebases The shift this week wasn't just new syntax. It was starting to see how production code is actually structured: modular, tested, asynchronous, component-driven. React in particular hit different. Going from "here's a webpage" to "here's a component" rewires how you think about building UIs. Week 4 is already underway. More soon. If you're on a similar path, let's connect! #React #JavaScript #AsyncJS #TDD #FullStackDevelopment #WebDevelopment #LearningInPublic #SoftwareEngineering #CareerChange

3 questions I ask before writing any function: 1. Can someone understand this in 30 seconds? 2. Am I solving a real problem or a hypothetical one? 3. Is there a simpler way to do the exact same thing? That's KISS in practice. It sounds obvious. But most of us (myself included) have violated all three in the same pull request. Wrote a full breakdown of the KISS Principle — with actual Node.js/Express/Prisma examples showing what over-engineered vs clean code looks like in real backend work. No theory fluff. Just code, context, and the mental shift that actually sticks. Drop a 🔥 if you've ever been burned by your own complex code! 👇 Link in first comment #javascript #nodejs #webdev #softwaredevelopment #cleancode

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 17/30 I wrote an API call inside `useEffect`… and React showed a warning 😐 useEffect(async () => { const res = await fetch("/api/users") }, []) The mistake: `useEffect` should NOT be async. React expects the effect to return either: nothing, or a cleanup function. But async always returns a Promise. Fix 👇 Create an async function INSIDE the effect and call it. useEffect(() => { async function fetchUsers() { ... } fetchUsers() }, []) Small change. Correct lifecycle behavior. Day 18 tomorrow 👀 #30DaysOfCode #reactjs #javascript #frontend #webdevelopment

State vs Props in React Simplified: If you're learning React, this is one of the most important concepts to understand 1. State: Managed inside the component Can be updated (mutable) Used for dynamic data (like counters, inputs) 2. Props: Passed from parent to child Read-only (immutable) Used to share data between components In short: State = “owned data” Props = “received data” Understanding this difference helps you write cleaner and more predictable React code. What confused you more when learning React: State or Props? #React #JavaScript #WebDevelopment #Frontend #Coding #100DaysOfCode

⚛️ The biggest mindset shift I had while learning React was this: Stop thinking in pages. Start thinking in components. Earlier, when building a UI, I used to think: “How do I build this whole page?” But React encourages a different approach: Break the UI into small reusable pieces. For example: A single page might actually be: 🔹 Navbar 🔹 Sidebar 🔹 Product Card 🔹 Button 🔹 Footer Each one becomes its own component. This makes code: ✔ Easier to maintain ✔ Easier to reuse ✔ Easier to debug Once I started thinking in components, building complex UIs became much more manageable. Small components → Scalable applications. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #FullStackDeveloper Ankur Prajapati MOHD ALI ANSARI Sheryians Coding School

#WebDevSaturdays [JS Hack #4] ⚙️🧩 𝗮𝘀𝘆𝗻𝗰/𝗮𝘄𝗮𝗶𝘁 made asynchronous code easier to read. But that readability sometimes hides how JavaScript actually executes operations. A classic example appears when developers combine 𝗮𝘀𝘆𝗻𝗰 functions with array helpers like 𝗺𝗮𝗽(). Consider this pattern: 𝗶𝘁𝗲𝗺𝘀.𝗺𝗮𝗽(𝗮𝘀𝘆𝗻𝗰 𝗶𝘁𝗲𝗺 => 𝗳𝗲𝘁𝗰𝗵𝗗𝗮𝘁𝗮(𝗶𝘁𝗲𝗺)) At first glance, it feels like the program processes each item and waits for the result. In reality, 𝗺𝗮𝗽() finishes instantly. Each iteration returns a promise, and the final result becomes an array of promises, not resolved values. This often causes subtle bugs. Logs show incomplete data. API calls finish after the surrounding function returns. Error handling becomes inconsistent because the promises were never awaited collectively. The correct pattern depends on what you want. 1️⃣ 𝘗𝘢𝘳𝘢𝘭𝘭𝘦𝘭 𝘦𝘹𝘦𝘤𝘶𝘵𝘪𝘰𝘯: Use 𝗮𝘄𝗮𝗶𝘁 𝗣𝗿𝗼𝗺𝗶𝘀𝗲.𝗮𝗹𝗹(𝗶𝘁𝗲𝗺𝘀.𝗺𝗮𝗽(...)) to resolve everything together. 2️⃣ 𝘚𝘦𝘲𝘶𝘦𝘯𝘵𝘪𝘢𝘭 𝘦𝘹𝘦𝘤𝘶𝘵𝘪𝘰𝘯: 𝗨𝘀𝗲 𝗮 𝗳𝗼𝗿...𝗼𝗳 loop with 𝗮𝘄𝗮𝗶𝘁. 3️⃣ 𝘊𝘰𝘯𝘵𝘳𝘰𝘭𝘭𝘦𝘥 𝘤𝘰𝘯𝘤𝘶𝘳𝘳𝘦𝘯𝘤𝘺: Limit simultaneous requests with a queue or batching strategy. 𝗮𝘀𝘆𝗻𝗰 changes how code looks, not how iteration behaves. perceived sequence can mask parallel execution. Next time async code returns sooner than expected, ask yourself. did the loop finish. or did the promises just begin. #JavaScript #WebDev #Async #Frontend #DevTips #Programming

⚠️ JavaScript Mistakes Every Developer Should Know Even experienced developers make these mistakes… avoid them 👇 ❌ Using == instead of === 👉 Can cause unexpected results due to type conversion ❌ Forgetting return in functions 👉 Function runs but returns undefined ❌ Not handling asynchronous code 👉 Code executes before data is ready ❌ Mutating objects/arrays directly 👉 Can lead to unexpected bugs ❌ Ignoring this behavior 👉 this depends on how a function is called ❌ Using var instead of let/const 👉 Leads to scope-related issues 🔥 Key Takeaway: Small mistakes in JavaScript can lead to big bugs. Write clean and predictable code. 💬 Which mistake have you made before? #javascript #webdevelopment #frontend #coding #100DaysOfCode