Lodash Optimization: Import Only Used Functions

In React, a Hook is just a JavaScript object. Each Hook stores: the state value a queue of updates and a reference to the next Hook Internally it looks like this: { memoizedState: state, queue: updates, next: nextHook } React stores Hooks as a linked list attached to the component's Fiber node. Fiber → Hook → Hook → Hook → null This is why Hooks must always be called in the same order. React reads them one by one during every render. When you call setState, React adds the update to the Hook's queue, and processes it during the next render. Hooks are not magic. They are simple objects connected together. Understanding this helps explain many React behaviors. #reactjs #javascript #webdevelopment

💡 JavaScript Tip💡 Many times we want to try some code of any library for quick testing but don't want to do initial setup to run that code. Maybe you want to use some jquery functions to check for some elements on the page or try some functions of any other library like lodash. In such cases, you can just google for CDN URL for that library and copy the contents of that library from that CDN URL and just paste into your browser console. Now, you can directly execute any function of that library in the browser console itself. 𝗙𝗼𝗿 𝗺𝗼𝗿𝗲 𝘀𝘂𝗰𝗵 𝘂𝘀𝗲𝗳𝘂𝗹 𝗰𝗼𝗻𝘁𝗲𝗻𝘁, 𝗱𝗼𝗻'𝘁 𝗳𝗼𝗿𝗴𝗲𝘁 𝘁𝗼 𝗳𝗼𝗹𝗹𝗼𝘄 𝗺𝗲. #javascript #reactjs #nextjs #webdevelopment

😍How to Get Started with Drizzle ORM in Next.js Using Neon PostgreSQL😍 𝗙𝗼𝗿 𝗺𝗼𝗿𝗲 𝘀𝘂𝗰𝗵 𝘂𝘀𝗲𝗳𝘂𝗹 𝗰𝗼𝗻𝘁𝗲𝗻𝘁, 𝗱𝗼𝗻'𝘁 𝗳𝗼𝗿𝗴𝗲𝘁 𝘁𝗼 𝗳𝗼𝗹𝗹𝗼𝘄 Muhammad Nouman. 👍 𝗟𝗶𝗸𝗲 & 𝗿𝗲𝗽𝗼𝘀𝘁 𝗶𝗳 𝘆𝗼𝘂 𝗳𝗼𝘂𝗻𝗱 𝘁𝗵𝗶𝘀 𝘂𝘀𝗲𝗳𝘂𝗹. #javascript #reactjs #nextjs #webdevelopment

Today I learned about the useRef hook in React, and it’s actually very useful! What is useRef? It allows us to create a reference that persists across renders without causing re-renders. Key Uses: Access DOM elements directly Store mutable values without re-rendering Useful for focus, timers, and previous values Example: import { useRef } from "react"; function InputFocus() { const inputRef = useRef(null); const handleClick = () => { inputRef.current.focus(); }; return ( <> <input ref={inputRef} type="text" /> <button onClick={handleClick}>Focus Input</button> </> ); } What I learned: Unlike state, updating useRef does NOT trigger a re-render. Excited to explore more React hooks! #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #LearningInPublic #90DaysOfCode

Avoid Unnecessary Re-renders in React Many React applications become slow not because of bad logic, but because of unnecessary re-renders. To understand this better, I prepared a short PDF explaining: -Memoization in React -useMemo vs useCallback vs React.memo -When optimization is useful -When memoization actually makes performance worse -Best practices for real projects Always remember: Measure first, optimize later. Sharing this guide for developers who want to improve React performance. #ReactJS #FrontendDeveloper #CleanCode #PerformanceOptimization #JavaScript

Today I learned about Lists & Keys in React. Lists allow us to render multiple items dynamically using methods like map(). For example: We can display a list of users, products, or tasks easily. Keys are used to uniquely identify each item in a list. This helps React efficiently update only the changed elements instead of re-rendering everything. Using unique keys improves performance and avoids bugs. Up Next: Forms in React 👀 React Series – Day 8 🚀 #ReactJS #LearningInPublic #WebDevelopment #FrontendDeveloper #JavaScript #100DaysOfCode

If anyone is interested in developing their skills in React.js, a quick thought based on my experience that might be helpful. 💬 Here are some tips for developing this skill: 1) Start with learning and practicing JSX , Components and props. 2) Go for hooks and state management then. React is different from Javascript, since it uses virtual dom. #javascript #react #webdevelopment

🚀 Your Bundle Size Guide Just Got Better – Updated Techniques! 🚀 Dropped the definitive JavaScript bundle optimization guide on javascriptdoctor.blog – now with 2026's latest techniques that actually ship to production. "Optimizing Bundle Size in JavaScript Applications" Proven wins from real apps: ✅ Tree-shaking lodash → 97% smaller (68KB → 2KB) ✅ React.lazy() route splitting (450KB → 120KB initial) ✅ Brotli compression beats Gzip by 76% ✅ Native fetch() kills axios bloat ✅ Vite vs webpack vs esbuild benchmarks Lighthouse scores jumped from red → green. Users actually stay. Read the updated guide: https://lnkd.in/gGZhds8b Quick win: Run npx webpack-bundle-analyzer today. You'll find your lodash/moment culprit immediately. What's YOUR biggest bundle bloat source? Drop it below! 👇 #JavaScript #Performance #NextJS #ReactJS #WebDev

Controlled Components in React Today I learned about Controlled Components in React. A controlled component is a form element whose value is controlled by React state instead of the DOM. This means React manages the input values using state and updates them through event handlers. 📌 How It Works The input value is stored in state The input field uses that state as its value When the user types, an onChange event updates the state This way React fully controls the form data. Understanding controlled components helped me see how React manages form inputs efficiently. Continuing to build strong React fundamentals step by step 🚀 #ReactJS #FrontendDevelopment #WebDevelopment #LearningJourney #JavaScript

Why Array Comparison in React State Is Tricky? If you’ve ever updated an array in React and your component didn’t re-render, you’re not alone. The reason? React compares state by reference, not by value. So if you modify the same array instead of creating a new one, React thinks nothing changed — even if the data inside it did. Never mutate state directly. Always create a new array or object when updating state. #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment