React useEffect: One Effect, One Responsibility

I created a simple counter application with the following features: ➕ Increment value (with an upper limit of +10) ➖ Decrement value (with a lower limit of −10) 🔄 Reset button to bring everything back to zero 🧠 Implemented logic using conditions (if/else) to control the range https://lnkd.in/deqfAkWb This project helped me strengthen my understanding of: JavaScript functions Conditional logic DOM manipulation State control in small applications Still learning and building step by step. More projects coming soon. 💻✨ #JavaScript #WebDevelopment #LearningByDoing #Frontend #CodingJourney #BeginnerProjects

For years, useEffect became the solution for almost everything: data fetching async logic form submissions state syncing That led to: extra renders dependency bugs hard-to-follow code React 19 changes the approach: Server Components fetch data before render Actions handle async workflows Suspense manages loading declaratively useEffect still exists but only for true side effects. #react #react19 #frontend #webdev #javascript

Day 9 of #75Hard Today was a reminder of how easy it is to forget the basics when libraries do the heavy lifting. While building a modal, I revisited: What a backdrop actually is (not CSS magic, but a real DOM layer) How event bubbling works Why stopPropagation() is critical to prevent unwanted closes Frameworks and UI libraries abstract these details so well that we stop questioning why things work — until we have to build them ourselves. Good reminder for me: If you don’t understand the core reason, you’re just assembling pieces — not engineering. Back to fundamentals. On to Day 10. #75Hard #JavaScript #WebDevelopment #Frontend #LearningInPublic #VueJS

I just published Oh Image v2. It is a React image component that handles optimization and responsiveness automatically. https://lnkd.in/d852HZ84 The v2 release includes: 🌐 Loaders: Added a system to fetch images from external CDNs with built-in support for Cloudinary, Cloudflare, and Imgproxy, plus support for Custom Loaders via the loader prop. ⚙️ Global Configuration: Introduced <ImageProvider /> to configure defaults for loaders, breakpoints, and loading strategies across the entire application. 🖼️ Vite Optimizer: Expanded image processing capabilities using Sharp; added new transformation options including blur, rotate, normalize, sharpen, and gam #ReactJS #WebDevelopment #Frontend #OpenSource #JavaScript #Vite #Typescript

👋 Hello! 🌱🪝Today I have gone through the one of most usable and necessary Hook i.e. 'useEffect' Hook. =>This useEffect hook will help us to do some side effect in our component such as fetching data, Updating the DOM, setting timers it runs automatically based on the dependencies we provide. useState =>Store data (users + loading). useEffect =>Run API call when component loads. fetch() => Get data from an API. loading =>Show message until data arrives. catch() => Handle errors. finally() =>Stop loading. map() =>Display each user. #ReactJS #useState #frontendDevelopment #Javascript #Learningjourney.

Another React pitfall I see very often. Overusing state when derived data is enough. Many components store values in useState that can be calculated directly from props or existing state. Then they add handlers just to keep everything in sync. This creates: • More state to manage • More bugs from stale or mismatched values • More re-renders than needed If a value can be derived, don’t store it. Compute it during render or memorize it with useMemo if it’s expensive. State should represent the source of truth, not every possible outcome. #react #javascript #frontend #reactjs #hooks #cleanCode #performance

🚦 Throttle in JavaScript – Control Function Execution Like a Pro Some events fire hundreds of times per second (scroll, resize, mousemove). Running logic on every event can kill performance.\ That’s where throttling helps. Throttle ensures a function runs at most once in a given time interval, no matter how many times the event fires. 🧠 When should you use Throttle? Scroll event handling Window resize listeners Mouse move tracking Rate-limited UI updates Throttle keeps your app smooth and efficient. 🚀 Why Throttle Matters Prevents performance issues Reduces unnecessary calculations Keeps UI responsive 💡 Insight If events fire continuously and you need regular updates → use Throttle If you need action only after user stops → use Debounce #JavaScript #Throttle #Frontend #WebDevelopment #Coding #InterviewPrep

Using <div> for buttons. Just stop. 🛑 When you use a <div> as a button, you're creating extra work for yourself and a nightmare for keyboard users. <button>: Handles focus, "Enter" key, and screen readers automatically. <div>: Requires JS hacks just to make it usable. The Tip: Let the browser do the heavy lifting. Use semantic elements and get 80% of your #a11y for free. 🛠️ #webdev #frontend #javascript #coding #accessibility

🔹JavaScript Tip: bind vs call vs apply These three methods are often confusing, but they all exist for one main reason: controlling the value of this when calling a function. Here’s a simple breakdown 👇 ✅ call() Invokes the function immediately Arguments are passed one by one ✅ apply() Invokes the function immediately Arguments are passed as an array ✅ bind() Does not invoke the function Returns a new function with this (and optional arguments) permanently bound Perfect for callbacks and event handlers Understanding these three makes working with callbacks, event listeners, and frameworks much easier. #JavaScript #WebDevelopment #Frontend #ProgrammingTips #CleanCode

Built a Stopwatch using JavaScript with start, stop, and reset functionality. Focused on timing logic, intervals, and clean UI for better user interaction. #JavaScript #WebDevelopment #Frontend #MiniProject #Coding #LearningByDoing