Limit useEffect for API calls and external interactions

🚀 React Hooks Small Projects I recently worked on a few small projects to better understand some important React Hooks. In this video, I demonstrated how these hooks work with simple examples so that beginners can easily understand their usage. 🔹 useState – Used to manage state inside a functional component. It helps update and display dynamic data in the UI. 🔹 useEffect – Used to handle side effects in React applications such as API calls, timers, and updating the DOM when state changes. 🔹 useContext – Helps share data globally across components without passing props manually through every level. 🔹 useReducer – A powerful hook for managing complex state logic, especially when multiple state updates depend on different actions. 🔹 useMemo – Optimizes performance by memoizing expensive calculations so they only run when dependencies change. 🔹 useCallback – Returns a memoized function to prevent unnecessary re-renders when passing functions to child components. These mini projects helped me strengthen my understanding of React Hooks and component optimization techniques. 📌 If you watch the video, you can easily understand how each hook works in a practical way. #ReactJS #ReactHooks #WebDevelopment #MERNStack #JavaScript #FrontendDevelopment #CodingPractice

I used to put everything inside useEffect… Until one broken component changed how I think about React. 👀 When I first learned React, useEffect felt like a superpower. Something changed? → useEffect. Need to update a value? → useEffect. Something not working? → Add another dependency. It worked… until it really didn't. One day I was debugging a small component. Nothing complex on the surface. But it had: → Multiple effects fighting each other → Derived state stored AND recalculated → Unexpected re-renders on every tick → Dependency warnings I kept ignoring I sat back and asked: "Why is a 50-line component this painful?" The answer hit me hard. 💡 I was using useEffect as a catch-all. And it was silently making everything harder. Here's the mental model that changed everything: 01. Value computable from props or state? → Calculate it during render. Don't store it again. 02. Logic triggered by a button click? → Put it in the event handler. Not an effect. 03. Just filtering or transforming data? → Do it inline. Render is free. useEffect exists for one purpose — syncing with things outside React: ✦ API calls ✦ Subscriptions ✦ Timers ✦ DOM manipulation ✦ External libraries / WebSockets That's it. The list is short intentionally. The moment I started respecting that boundary… My components became: ✅ Cleaner to read ✅ Easier to debug ✅ More predictable ✅ Faster to ship Sometimes writing better React means writing less useEffect. The best refactor I ever did was deleting three effects — and replacing them with nothing at all. Have you ever refactored a component and removed half your effects? Drop your "aha moment" below 👇 I'd love to read it. #React #ReactJS #JavaScript #FrontendDevelopment #CleanCode #WebDevelopment #SoftwareEngineering #LearningJourney

React performance issues often start with one simple mistake: Using React.memo, useMemo, and useCallback without knowing the difference. They all sound similar, but they solve different performance problems. Here’s the simple breakdown 👇 ⚛️ React.memo – Memoizes a component If the props don’t change, React skips re-rendering the component. 👉 Best when a component re-renders often but receives the same props most of the time. 🧠 useMemo – Memoizes a computed value It stores the result of an expensive calculation and only recomputes it when dependencies change. 👉 Useful for things like filtering, sorting, or heavy calculations. 🔁 useCallback – Memoizes a function Prevents a function from being recreated on every render. 👉 Especially helpful when passing callbacks to memoized child components. But here’s the important part 👇 🔹 React.memo → Optimizes component re-renders 🔹 useMemo → Optimizes expensive calculations 🔹 useCallback → Optimizes function references 💡 Adding them everywhere doesn’t automatically improve performance. In fact, unnecessary memoization can make your app slower and harder to maintain. The real skill is knowing when optimization is actually needed. If you're learning React, understanding these three tools can make debugging re-renders and performance issues much easier. 💬 Quick question: Which one confused you the most when you first learned React — useMemo or useCallback? #React #JavaScript #WebDevelopment #FrontendDevelopment #ReactJS #CodingJourney

Revisiting React Fundamentals 🚀 Over the past few days, I went back to the core concepts of React to strengthen my foundation. Instead of rushing into advanced libraries, I focused on understanding how React actually works under the hood. Here’s what I’ve revised and practiced so far: 🔹 JSX & component structure Understanding how UI is broken into reusable components and how JSX makes UI logic more readable. 🔹 Props vs State How data flows in React, passing props between components, and managing dynamic UI with useState. 🔹 Event handling Handling user interactions like clicks, inputs, and form submissions in a clean React way. 🔹 Conditional rendering Rendering UI based on conditions (ternary, &&, etc.) to make components dynamic. 🔹 useEffect basics Handling side effects like API calls, timers, and lifecycle behavior with useEffect. 🔹 Basic project structure Organizing folders, separating components, and writing cleaner, scalable code. Why this revisit? I realized strong fundamentals make advanced topics like performance optimization, state management, and full-stack development much easier to grasp. Currently continuing with: ➡️ Building small projects ➡️ Practicing problem solving ➡️ Strengthening JavaScript + React together Always open to feedback and learning from the community. What React concept do you think every developer should master early? #React #FrontendDevelopment #WebDevelopment #JavaScript #LearningInPublic #100DaysOfCode #DeveloperJourney #ReactJs

One mistake I kept making while learning React was overusing useEffect. Any time I needed to update something based on state, my first instinct was: Let’s just add an effect for this. It worked at first… until my components started behaving in weird ways: • state updating twice • unexpected re-renders • and once, an infinite loop that took me way too long to debug That’s when I realised something important: useEffect is not for managing normal component logic — it’s for side effects. Now, before writing an effect, I ask myself: Am I syncing with something outside React, or am I just calculating data? If it’s just data, I compute it directly or use useMemo if it’s expensive. This one small change made my React code: simpler, easier to read, and way less buggy. Still learning, but moments like these really changed how I think about React. #reactjs #javascript #frontend #webdevelopment #reacthooks

🚀 New Project Update: Quiz Web Application I recently built a Quiz Web Application using React.js and TypeScript, and it was a great learning experience while strengthening my frontend development skills. 🔧 Tech Stack & Concepts Used: • React.js with TypeScript • Trivia API for dynamically generated quiz questions • Styled Components for component-based styling • TypeScript concepts like Enums, Types, and Interfaces • React.FC patterns • Rendering HTML content safely using dangerouslySetInnerHTML (__html) Through this project, I gained deeper hands-on experience with type safety in TypeScript, component structuring, API integration, and modern styling approaches in React. 🎥 I’ve also recorded a demo video showing how the application works. 💻 The source code is available on my GitHub, and I’ll be sharing the repository link https://lnkd.in/gjYYnnnR. 🌐 Next step: Deploying the application on Netlify so everyone can try it online. I’d love your feedback and suggestions! 🙌 #ReactJS #TypeScript #WebDevelopment #FrontendDevelopment #JavaScript #Coding #DeveloperJourney

Why React Re-Renders (And Why That’s Not Always Bad) One of the most common things I hear about React: “It’s re-rendering again.” And it’s usually said like… something is broken. But here’s the truth: Re-renders are not the enemy. They’re how React works. 🔁 What Actually Triggers a Re-Render? A component re-renders when: - Its state changes - Its props change - Its parent re-renders That’s it. React doesn’t randomly re-render your components. It responds to change. 😅 The Misconception Many developers try to prevent every re-render using: - useMemo - useCallback - React.memo But here’s the question: Are the re-renders actually expensive? Because most of the time… They’re not. React’s reconciliation is fast. Rendering a few components again usually costs almost nothing. ⚠️ When Re-Renders Become a Problem Re-renders matter when: - You’re rendering large lists - Heavy computations run on every render - Expensive child components re-render unnecessarily That’s when optimization makes sense. Not before. 🧠 The Mental Shift Instead of asking: “How do I stop this from re-rendering?” Ask: “Is this re-render actually causing a performance issue?” Measure first. Optimize second. 💡 Final Thought React is built around predictable re-renders. Trying to eliminate them entirely often: - Adds complexity - Makes code harder to read - Introduces subtle bugs Clean code + correct mental model > aggressive optimization. Follow for more practical breakdowns. #ReactJS #JavaScript #FrontendDevelopment #SoftwareEngineering #WebDevelopment #ReactHooks

🚀 Day 12 of My React JS Journey – Understanding State Deeply ⚛️ Today I strengthened my understanding of the core concept in React — State. 🔹 What is State? State represents the data in a React application that can change over time. Whenever the state changes, React automatically re-renders the component, updating the UI. 💡 Key Learnings: ✔ State is mutable (updated using setter function) ✔ State is local to a component ✔ State is reactive (UI updates automatically on change) 🔹 Creating & Managing State: Step 1: JavaScript import { useState } from "react"; Step 2: JavaScript const [value, setValue] = useState(initialValue); • value → holds current state • setValue → updates the state ⚠️ Important Insight: State updates are asynchronous ⏳ JavaScript setValue(5); console.log(value); // still old value This helped me understand how React processes updates internally. ⚛️ Behind the Scenes: React uses Virtual DOM ✔ Creates a virtual copy of UI ✔ Compares changes efficiently ✔ Updates only required parts 👉 This makes React fast and efficient 🚀 💭 Today’s Takeaway: State is the backbone of dynamic UI in React. Mastering state means mastering how React works. Learning step by step and building strong fundamentals every day 📈🔥 #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ReactState #VirtualDOM #LearningJourney #DeveloperGrowth

What Runs First in React? Most React developers know what useEffect, useMemo, and useCallback do individually. Far fewer know the exact order they execute in. And that gap causes bugs that are surprisingly difficult to trace. Here is the definitive execution order on first mount: -> Step 1: Rendering JSX React runs the function body of your component first. JSX is evaluated. console.log inside the return runs here. This is the render phase. -> Step 2: useMemo runs during render useMemo executes synchronously during the render phase, not after it. If you have an expensive computation wrapped in useMemo, it runs as part of building the component output. This is why useMemo can be used to compute values that are needed in the JSX itself. -> Step 3: useEffect runs after render After the component has rendered and the DOM has been updated, useEffect fires. It is intentionally deferred. This is where API calls, subscriptions, and side effects belong because they should not block the render. -> useCallback is different from all of them useCallback does not run during mounting. It stores a function reference. That function only executes when it is explicitly called. In the example on the right, increment only logs when you actually call increment(). The final order: Rendering JSX, then useMemo, then useEffect. Why this matters in practice: If you expect useEffect to run before useMemo, your state update will not be available when useMemo computes. If you expect useCallback to run automatically, your side effect will never fire. Getting the order wrong means working with stale data and writing code that behaves differently than you intended. Understanding execution order is not academic. It is the difference between components that behave predictably and ones that produce subtle timing bugs you spend hours debugging. Did you know the exact execution order before seeing this or did it surprise you? #React #ReactHooks #FrontendDevelopment #JavaScript #WebDevelopment #Developers

🚀 Day 1/30 – What is React? Starting my 30 Days React Journey 💻 Instead of building websites page by page… what if you could build reusable UI blocks once and use them everywhere? That’s exactly what React does 👇 ✅ A JavaScript library for building interactive UIs ✅ Powers Single Page Applications (SPA) ✅ Based on reusable, component-driven architecture 💡 Simple Example: Instead of rewriting the same navbar or button on every page, React lets you create it once and reuse it anywhere. 🔥 Key Takeaway: React isn’t just about UI — it’s about thinking in components and building scalable apps. 📌 I’ll be sharing my learning daily for the next 30 days. Follow along if you're learning React too! Are you already learning React or planning to start? 👇 #React #FrontendDevelopment #JavaScript #WebDev #CodingJourney #LearnInPublic