React Memoization: Avoiding Rerenders with Pure Components

𝐃𝐚𝐲 𝟒 𝐨𝐟 𝐮𝐧𝐟𝐨𝐥𝐝𝐢𝐧𝐠 𝟙𝟝 𝐦𝐚𝐣𝐨𝐫 𝐜𝐨𝐧𝐜𝐞𝐩𝐭𝐬 𝐨𝐟 𝐑𝐞𝐚𝐜𝐭 One of the main reasons we use React is that we don’t manually interact with the DOM. React manages updates efficiently on our behalf. Instead of directly re-rendering the real DOM, React uses the 𝐕𝐢𝐫𝐭𝐮𝐚𝐥 𝐃𝐎𝐌 for better performance. React provides special functions called 𝐇𝐨𝐨𝐤𝐬 that control component behavior and DOM interaction. One important hook is 𝐮𝐬𝐞𝐒𝐭𝐚𝐭𝐞. It is used to store and manage data (state) inside a component. When the state value changes, React automatically re-renders the component and updates only the necessary parts of the DOM. Learning one concept at a time to build a strong foundation in React. #ReactJS #WebDevelopment #LearningInPublic #ReactHooks #VirtualDOM #Frontend #JavaScript

Ever wondered why useEffect runs twice and thought: “React is broken”? It’s actually doing you a favor. In development, React deliberately re-runs effects to expose: - Hidden side-effects - Missing cleanups - Unsafe logic This behavior occurs in Strict Mode and does not affect production. Once you understand this, you can stop fighting React and start writing effects that are predictable, clean, and future-proof. React isn’t trolling you; it’s training you. #React #ReactHooks #Frontend #JavaScript #WebDevelopment

Ever looked at your frontend code and thought — “It works… but something feels wrong.” That “feels wrong” is often a code smell 🦨 In my latest Medium article, I break down: • What code smells really are (not bugs, but warnings) • Common frontend code smells I’ve seen in real projects • Why ignoring them leads to bugs & tech debt • Practical JavaScript / TypeScript examples Clean code isn’t about perfection — it’s about making code easy to read, change, and trust. 👉 Read the article here: [https://lnkd.in/gXyieZBG] #Frontend #JavaScript #TypeScript #CleanCode #CodeSmells #WebDevelopment

A mistake I made while working with React. For a long time, I thought more state meant more control. That assumption caused issues later. Here’s what I noticed in real projects: - Components became harder to reason about - Unnecessary re-renders appeared - Debugging took longer than expected What changed my approach: - I questioned whether state was actually needed - I avoided storing derived values - I kept state close to where it’s used One simple rule helped me a lot. If state can be calculated, it probably shouldn’t be stored. How do you decide what truly belongs in state? #react #javascript #frontend #webdevelopment

🔁 Closures in JavaScript A closure is when a function remembers variables from its parent function, even after the parent function has finished executing. function outer() {  let count = 0;  return function inner() {   count++;   console.log(count);  } } const counter = outer(); counter(); // 1 counter(); // 2 👉 inner() still remembers count 👉 That memory is called a closure If closures ever confused you, save this post 👍 #JavaScript #WebDevelopment #Frontend #CodingSimplified #LearnJS #BhaviDigital

"useEffect" is one of the most misunderstood hooks in React. Most beginners think it’s for “running code after render” but that mindset causes bugs and unnecessary re-renders. A better way to think about "useEffect" It synchronizes your component with something outside React. Good use cases: Fetching data from an API Subscribing to events Updating document.title Cleaning up listeners Rule of thumb: If your logic doesn’t interact with the outside world, it probably doesn’t belong in "useEffect". Understanding this early makes your React code cleaner, predictable, and easier to maintain. #React #WebDevelopment #Frontend #JavaScript #ReactHooks

Understanding "this" as a core (Arrow vs Normal Function) Many times confusion around this comes from thinking it depends on where a function is written, but in reality it depends on how the function is called. In the example below, the outer function is called as an object method, so its this refers to the object itself. The inner function is an arrow function, which does not create its own this and instead lexically inherits it from the parent function. This small distinction cleared a lot of confusion for me around this behavior in JavaScript . If the inner function were a normal function instead of an arrow function, the value of this would be different. #JavaScript #LearningInPublic #WebDevelopment #Frontend #NodeJS

🚀 Day 63/100 – Custom Hooks | Reusable Logic in React Custom Hooks are a powerful way to extract and reuse logic across React components. By moving shared behavior into hooks, code becomes cleaner, more modular, and significantly easier to maintain. Following the use naming convention ensures compatibility with React’s rules of hooks, while patterns like useFetch and useLocalStorage help eliminate duplication and improve consistency across projects. Key highlights: Creating reusable logic with custom hooks Following the use naming convention Improving code cleanliness and maintainability Reducing duplication with shared hook patterns 💡 Pro Tip: If you see the same logic repeated in multiple components, it belongs in a custom hook. #Day63 #100DaysOfCode #FullStackDevelopment #ReactJS #JavaScript #CustomHooks #WebDevelopment #FrontendDevelopment #DeveloperJourney

Went back to core concepts like components, props, state, hooks, and component lifecycle to strengthen my fundamentals. Revisiting the basics always helps uncover better patterns, cleaner code, and improved performance. It’s a good reminder that strong foundations are key to building scalable and maintainable applications. #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #LearningJourney #Revision

Hot take (but true): React is not hard. JavaScript is. 👍If you don’t understand closures, useDebounce is just copy-paste magic. 👍If you don’t understand reference vs value, your useEffect dependencies will re-run forever and you’ll blame React.  👍If you don’t understand event loop & async behavior, useEffect, promises, and state updates will feel “random”. Most React performance issues are JavaScript knowledge gaps, not React problems. Frameworks don’t replace fundamentals. They amplify them. Learn JavaScript deeply first. React will suddenly feel… simple. #reactjs #javascript #frontend #softwareengineering #careeradvice