🚀 30 Days — 30 Coding Mistakes Beginners Make Day 8/30 My backend server CPU suddenly went high 🔥 The reason? A simple `useEffect`. I wrote an API call inside `useEffect`… and forgot the dependency array. By default, `useEffect` runs after EVERY render. Inside it I was updating state → which caused another render → which called the API again. Infinite request loop. Fix 👇 useEffect(() => { fetchUsers(); }, []) Empty dependency array = run only once on mount. Small brackets. Huge difference. Day 9 tomorrow 👀 #30DaysOfCode #reactjs #javascript #frontend #webdevelopment #codeinuse
React useEffect infinite loop: Fixing a common mistake
More Relevant Posts
-
Node Internals🫡 Today we explored Node.js in depth and learned about its architecture and how it works internally. Nodejs==(V8 engine + livuv library + C++) Lifecycle of the Eventloop EventLoop TRUE{ expired callback(); IO polling(); setImmediate(); close callback(); } Thank you, Piyush Garg sir, for guiding us and teaching Node.js so clearly. #chaicode #javascript #nodejs #learning #learninpublic
To view or add a comment, sign in
-
-
When I started JavaScript… I thought: 👉 “Browser is running my code” Reality 👇 There’s an ENGINE behind everything ⚡ 👉 The V8 Engine That’s when I realized: 💡 Code ≠ Execution 💡 Syntax ≠ Performance 🔥 The real game: Understanding what happens under the hood Since then… I don’t just write JS 👉 I write V8-friendly JS 💬 When did YOU realize this? 👇 #JavaScript #Learning #Developers #V8 #CodingJourney
To view or add a comment, sign in
-
-
🚀 30 Days — 30 Coding Mistakes Beginners Make Day 19/30 I left a page… and React threw a scary warning 😐 “Can't perform a state update on an unmounted component” I wasn’t even touching state. The real culprit? setTimeout. The user navigated away, but the timer still executed and tried updating state. Component gone ❌ Timer still running ✔️ Fix 👇 return () => clearTimeout(timer) Always clean up inside `useEffect`. Timers, listeners, and API calls must be cancelled. Small habit. Prevents huge debugging sessions. Have you faced this warning? #30DaysOfCode #reactjs #javascript #frontend #codeinuse
To view or add a comment, sign in
-
-
🚀 React 19 just made our code cleaner! Did you know forwardRef is no longer needed in React 19? ✅ ref is now just a regular prop — no wrapper, no extra imports, no boilerplate! I recorded a short video breaking it down with a real example — triggering a Child button from a Parent using ref. 🎥 Watch the video to see it in action 💻 Code is live on my GitHub — link in comments! #React #React19 #JavaScript #Frontend #WebDevelopment #Programming #100DaysOfCode Small change, big improvement in developer experience. Love where React is heading! 💙
To view or add a comment, sign in
-
🚀 30 Days — 30 Coding Mistakes Beginners Make Day 20/30 My app felt slow… but CPU usage was low 😐 After debugging I found: A child component kept re-rendering even when its data didn’t change. The problem: const user = { name: "Alex" } Looks same right? But every render creates a NEW object. React compares references: old !== new → re-render. Fix 👇 const user = useMemo(() => ({ name: "Alex" }), []) Now the reference stays stable. React performance issues are rarely big mistakes… they are tiny invisible ones. Have you debugged unnecessary re-renders before? #30DaysOfCode #reactjs #javascript #frontend #codeinuse
To view or add a comment, sign in
-
-
Two Important JavaScript Concepts Every Developer Should Know 🚀 I made a simple guide to explain Debounce and Throttle. ⚡ Debounce – Function runs after the last call. 👉 Example: Wait until user stops typing in a search box. 👉 Analogy: Elevator door – waits for people, then closes. ⏱️ Throttle – Function runs once in a fixed interval. 👉 Example: Run scroll function every 1 second, not every scroll. 👉 Analogy: Metro train – leaves every 10 minutes, no matter what. Why this matters? Your website becomes faster and smoother. No more lag! 💨 Which one do you use more? Share in comments! 👇 #JavaScript #WebDevelopment #Coding #Frontend #ProgrammingTips
To view or add a comment, sign in
-
-
JavaScript Array Methods Every Developer Must Master 🚀 Arrays power your JS code—unlocking them boosts efficiency and readability big time! 💻 Essential methods to level up: 🔄 map() - Transforms every item effortlessly ⏳ filter() - Picks only what matches your criteria ⚡ reduce() - Boils arrays down to one value 🔍 find() - Snags the first match instantly ✅ some() / every() - Quick true/false checks on conditions Master these for cleaner, pro-level code! Who's practicing today? 👇 #JavaScript #WebDev #Frontend #CodingTips #Programming #ReactJS #DeveloperLife #TechTips #LearnToCode #100DaysOfCode
To view or add a comment, sign in
-
-
Today's class pushed me a bit out of my comfort zone with Node.js — and that’s always a good sign of learning. Here’s what we explored today: • What Node.js really is (in depth) • How V8 + C++ + LibUV together power Node.js • Understanding the Event Loop • Expired callbacks, I/O tasks, and the async workflow We also received a great assignment: Record a video explaining how the Event Loop works and how the entire process runs behind the scenes. Really enjoyed the session by Piyush Garg , Akash Kadlag , and Anirudh J. #chaicode #nodejs #webdevcohort2026 #javascript #backenddevelopment
To view or add a comment, sign in
-
-
🌀 Recursion in JavaScript Recursion is a technique where a function calls itself to solve a problem. 👉 It works by breaking a problem into smaller parts 👉 Each call handles a smaller input 👉 It stops when it reaches a base case 💡 Key Concepts: • Base Case → Stops the recursion • Recursive Case → Calls the function again ⚠️ Important: Without a base case, recursion will cause infinite calls and crash the program. 🔥 Key Takeaway: Solve a small part and let recursion handle the rest. #javascript #webdevelopment #frontend #coding #100DaysOfCode
To view or add a comment, sign in
-
-
React Compiler 1.0 is out (React 19 and React 17 with additional configuration) — and it's the end of writing useMemo and useCallback by hand. It's a build-time tool that analyzes your component's data flow and automatically decides what to memoize. The key word is "decides" — it doesn't wrap everything blindly. - Simple primitive operation like const x = a + b? Skipped. - Array filter or map that depends on props? Memoized. - Callback passed to a child component? Stabilized. - Used only locally? Left alone. My honest take - useMemo and useCallback are slowly becoming what class components are today. You'll recognize them in legacy code, but never write them from scratch. Trying it already or still waiting? Drop a comment 👇 #React #ReactJS #ReactCompiler #Frontend #JavaScript #React19
To view or add a comment, sign in
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development