How ASI can change your JavaScript code's meaning

Day 10, and I’ve moved on from simple lists (arrays) to managing complex data with JavaScript Objects! If arrays are just numbered lists, objects are like personalized file folders that let you organize information using descriptive names (keys) instead of numbers. This is how you structure anything with multiple properties like a user profile or a product all inside one clean variable. I learned the two main ways to grab information from them: Dot Notation (e.g., user.name) and Bracket Notation (e.g., user['email']). It feels like the final piece of the data organization puzzle! When you’re dealing with objects in JavaScript, when is it necessary or better to use Bracket Notation over Dot Notation?" #objects #javascript #31dayschallenge #growth #frontend #webdevelopment

🤯 Why does my component re-render even though props look the same?? I hit this issue while optimizing a data table. The child component kept re-rendering on every state change, even when the data looked identical. Here’s a simplified version: function Parent() { const [count, setCount] = useState(0); const filters = { status: "active" }; return ( <> <button onClick={() => setCount(c => c + 1)}>{count}</button> <Table filters={filters} /> </> ); } filters looks the same every render, right? But React thinks it’s new every time - because a new object is created on each render. 🧠The Root Cause React uses shallow comparison for props. Even if two objects have identical content, their references are different - and that’s enough to trigger a re-render. ✅The Fix Stabilize your props using useMemo or useCallback: const filters = useMemo(() => ({ status: "active" }), []); Now filters keeps the same reference between renders 💡 Takeaway > React re-renders not because of what’s inside your props, but because of what they point to. Stability in references = stability in performance. 🗣️ Your Turn Have you ever chased a “mystery re-render” before? What tools do you use to debug them - React DevTools, why-did-you-render, or console logs? #ReactJS #WebDevelopment #FrontendDevelopment #PerformanceOptimization #CleanCode #JavaScript #ReactHooks #DevCommunity #LearnInPublic

🚀 From useEffect chaos to clean useQuery simplicity! Here’s a before-after look at how Qortex makes your React data fetching experience effortless 👇 Before: Messy useEffect, manual state updates, loading and error handling everywhere 😩 After: Just one line — useQuery("user", { fetcher }) 💪 ✅ Less React lifecycle clutter ✅ Built-in caching & persistence ✅ Shared queries = no duplicate network calls ✅ No provider or boilerplate setup ✅ Simple plug-and-play It’s like React Query, but more minimal and plug-and-play friendly ⚡ 👉 Try it here: https://lnkd.in/gSyXajZn #reactjs #opensource #frontend #javascript #developerexperience #qortex

𝐓𝐨𝐝𝐚𝐲 𝐈 𝐥𝐞𝐯𝐞𝐥𝐞𝐝 𝐮𝐩 𝐦𝐲 𝐑𝐞𝐚𝐜𝐭 𝐬𝐤𝐢𝐥𝐥𝐬 𝐛𝐲 𝐢𝐦𝐩𝐥𝐞𝐦𝐞𝐧𝐭𝐢𝐧𝐠 𝐬𝐦𝐨𝐨𝐭𝐡, 𝐟𝐥𝐢𝐜𝐤𝐞𝐫-𝐟𝐫𝐞𝐞 𝐩𝐚𝐠𝐢𝐧𝐚𝐭𝐢𝐨𝐧 𝐮𝐬𝐢𝐧𝐠 𝐑𝐞𝐚𝐜𝐭 𝐐𝐮𝐞𝐫𝐲! I was exploring how to load API data page-by-page without the UI blinking or resetting and React Query’s 𝒌𝒆𝒆𝒑𝑷𝒓𝒆𝒗𝒊𝒐𝒖𝒔𝑫𝒂𝒕𝒂 feature completely changed the game for me. 🔥 What I Built - Dynamic Pagination using useState - Data Fetching with useQuery - Personalized API calls using pageNumber - Smooth transitions using keepPreviousData - Clean, minimal UI for posts + pagination buttons - Proper error & loading handling What I Learned 🔹 React Query refetches only when queryKey changes → ["posts", pageNumber] 🔹 queryFn should always be a function → () => FetchPosts(pageNumber) 🔹 API must receive the correct page number to return limited results 🔹 keepPreviousData helps avoid UI jumps and blank screens 🔹 Good CSS structure matters — it prevents overlapping and maintains layout 🎯 Outcome A smooth, modern, user-friendly pagination UI where: ✨ No flickering ✨ No layout shifting ✨ Old data stays visible while new data loads ✨ Perfect experience for users 🛠️ 𝑻𝒆𝒄𝒉 𝑺𝒕𝒂𝒄𝒌 : React.js, React Query, Axios, JSONPlaceholder API, Custom CSS I’m really enjoying diving deeper into React Query — the amount of control it gives over data fetching is incredible! Excited to keep building and learning more every day! #react #reactjs #reactquery #webdevelopment #frontenddeveloper #learningjourney #javascript

𝐄𝐯𝐞𝐫 𝐰𝐨𝐧𝐝𝐞𝐫𝐞𝐝 𝐰𝐡𝐞𝐫𝐞 𝐲𝐨𝐮𝐫 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐯𝐚𝐫𝐢𝐚𝐛𝐥𝐞𝐬 𝐚𝐜𝐭𝐮𝐚𝐥𝐥𝐲 𝐥𝐢𝐯𝐞? Let’s make it super simple. Imagine your brain has two spaces — a tiny desk for quick tasks and a big cupboard for storing bulky stuff. That’s exactly how JavaScript manages memory 👇 🧠 𝕊𝕥𝕒𝕔𝕜 𝕄𝕖𝕞𝕠𝕣𝕪 = The Desk This is where small, quick items go — numbers, strings, booleans. It’s fast, neat, and clears up right after you’re done. 𝚕𝚎𝚝 𝚗𝚊𝚖𝚎 = "𝙰𝚗𝚊𝚜"; 𝚕𝚎𝚝 𝚊𝚐𝚎 = 𝟸𝟼; Both variables fit nicely on the stack. 📦 ℍ𝕖𝕒𝕡 𝕄𝕖𝕞𝕠𝕣𝕪 = The Cupboard This is for bigger and more complex things — objects, arrays, functions. It takes more space and time to access. 𝚕𝚎𝚝 𝚞𝚜𝚎𝚛 = { 𝚗𝚊𝚖𝚎: "𝙰𝚗𝚊𝚜", 𝚊𝚐𝚎: 𝟸𝟼 }; The object is stored in the heap, but a reference to it sits in the stack. ⚖️ In short: Stack → fast, organized, for simple data Heap → flexible, powerful, for dynamic data Understanding this helps you write cleaner code, avoid memory leaks, and truly know what happens “under the hood.” #JavaScript #CodingTips #WebDevelopment #LearnInPublic #Frontend #AnasKhan

The idea was simple — fetch live data asynchronously and visualize it on an interactive map without refreshing the page. Each marker represents a real-time data point, added dynamically as the response loads. This small experiment shows how powerful asynchronous JavaScript and modern mapping libraries can be when combined to create seamless user experiences. It’s not just code — it’s about making data come alive ✨ #JavaScript #AJAX #LeafletJS #WebDevelopment #CodingJourney #FrontendDevelopment #Innovation #LearningByDoing #DevCommunity

🌟 Day 53 of JavaScript 🌟 🔹 Topic: Fetch API 📌 1. What is the Fetch API? The Fetch API allows JavaScript to make HTTP requests (like GET, POST, PUT, DELETE) to servers — used to retrieve or send data 🌐 💬 Think of it as JavaScript’s way to talk to web servers asynchronously. ⸻ 📌 2. Basic Syntax: fetch("https://lnkd.in/gXUzR2fM") .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error("Error:", error)); ✅ Step-by-step: 1️⃣ Fetch sends the request 2️⃣ Waits for the response 3️⃣ Converts it (like .json()) 4️⃣ Handles the data or errors ⸻ 📌 3. Using async/await: async function getData() { try { const response = await fetch("https://lnkd.in/gXUzR2fM"); const data = await response.json(); console.log(data); } catch (err) { console.error("Fetch failed:", err); } } getData(); ⚙️ Cleaner, more readable syntax for async operations. ⸻ 📌 4. POST Example: fetch("https://lnkd.in/gJ4WB7DB", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: "Pavan", age: 25 }) }); ⸻ 📌 5. Why Use Fetch API? ✅ Simpler than XMLHttpRequest ✅ Promise-based ✅ Works with async/await ✅ Built-in for browsers ⸻ 💡 In short: The Fetch API makes calling APIs in JavaScript simple, powerful, and modern — the go-to tool for all web requests 🚀 #JavaScript #100DaysOfCode #FetchAPI #WebDevelopment #FrontendDevelopment #CodingJourney #JavaScriptLearning #CleanCode #AsyncJS #Promises #DevCommunity #CodeNewbie #WebDev

What is an Object? In JavaScript, an object is a data type that stores key-value pairs. Objects are used to store related information together. Why Use Objects? Organize Data: Store multiple pieces of information together. Dynamic Access: Access values using their keys. Complex Data Structures: Can store arrays, other objects, etc. Reusable Code: Easy to use in multiple functions or processes. #javascript #react #webdesign #webDeveloping

🚀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗗𝗲𝗲𝗽 𝗗𝗶𝘃𝗲: 𝗠𝗮𝘀𝘁𝗲𝗿𝗶𝗻𝗴 𝘁𝗵𝗲 𝗙𝗲𝘁𝗰𝗵 𝗔𝗣𝗜 💡 Say goodbye to old-school XMLHttpRequest! The Fetch API is the modern, promise-based way to make HTTP requests in JavaScript — simple, powerful, and elegant. ⚡ 🔹 𝗕𝗮𝘀𝗶𝗰 𝗙𝗲𝘁𝗰𝗵 𝗘𝘅𝗮𝗺𝗽𝗹𝗲: fetch('https://lnkd.in/gWKpgMrT') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); ✅ fetch() returns a Promise ✅ response.json() converts response to JSON ✅ .catch() ensures error handling 🔹 𝗖𝗹𝗲𝗮𝗻𝗲𝗿 𝗦𝘆𝗻𝘁𝗮𝘅 𝘄𝗶𝘁𝗵 𝗔𝘀𝘆𝗻𝗰/𝗔𝘄𝗮𝗶𝘁: async function getData() { try { const response = await fetch('https://lnkd.in/gWKpgMrT'); const data = await response.json(); console.log(data); } catch (error) { console.error('Error:', error); } } getData(); ✨ No more nested .then() chains — just clean, readable async code! 💡 𝗣𝗿𝗼 𝗧𝗶𝗽𝘀: 🔸 Always handle network errors 🔸 Add headers for authentication & content-type 🔸 Supports GET, POST, PUT, DELETE and more Credit 💳 🫡 Sameer Basha Shaik 🚀 The Fetch API is a must-know tool for every frontend developer — perfect for fetching data, integrating APIs, and building modern web applications! 🌐 #JavaScript #FetchAPI #WebDevelopment #AsyncAwait #Frontend #CodingTips #CleanCode #DeveloperCommunity #Promises #LearnToCode #jsdeveloper

Signals are reactive by design, but using them smartly with computed() can make your UI even faster, especially in data-heavy components. ✅ 1) Use computed() for expensive logic total = computed(() => this.items().reduce((sum, i) => sum + i.price, 0) ); ✔ Runs only when items() changes ✔ No extra checks every render ✅ 2) Slice big state into smaller signals profile = signal({...}); cart = signal({...}); ui = signal({...}); ✔ Keeps updates isolated ✔ Prevents unnecessary DOM updates ✅ 3) Batch multiple updates batch(() => { this.name.set('Rohit'); this.age.set(29); }); ✔ Triggers one re-render instead of many ✅ 4) Use untracked() when value doesn’t affect UI display = computed(() => { const locale = untracked(() => 'en-IN'); return formatCurrency(this.total(), locale); }); ✔ Avoids unwanted recomputation ✅ 5) Always trackBy in loops @for (item of items(); track item.id) { <app-row [item]="item"/> } ✔ Prevents DOM rebuilds Finally - computed() → memoize derived values - Slice state → avoid global invalidation - Batch updates → minimize change cycles - Untrack static values → cleaner dependencies #Angular #Signals #RxJS #Reactivity #FrontendTips #WebDevelopment #JavaScript #FullStackDeveloper #CleanCode #CodingJourney #CSS #Frontend #ResponsiveDesign #UIDesign #NodeJS #ExpressJS #PostgreSQL #pgAdmin #Backend #API #FullStack