Fixing Array State Updates in React with toSpliced()

I learned about the rest operator in JavaScript. When a function can receive an unknown number of arguments, we can use the rest operator (...). We define the known parameters first, and then use ... with one parameter to collect the remaining arguments. All extra arguments are stored inside that rest parameter as an array. A simple but powerful feature that makes functions more flexible. #JavaScript #ES6 #RestOperator #Functions #WebDevelopment #LearningJourney

⚛️ React Internals — Understanding the RSC Payload & React Flight Protocol When using React Server Components (RSC) in frameworks like Next.js, React doesn't send fully rendered HTML or large JavaScript bundles to the browser. Instead, React sends a special serialized data stream called the RSC Payload. This payload is generated using the React Flight Protocol. What is the React Flight Protocol? The React Flight Protocol is the format React uses to transmit Server Component results from the server to the browser. Instead of sending HTML, React sends structured instructions describing the component tree. Example payload: ["$","div",null,{  "children":[   ["$","h1",null,{"children":"Product Name"}],   ["$","$L2c",null,{"id":123,"qty":1}]  ] }] Here: • div → root element • h1 → server rendered element • $L2c → client component reference • { id:123, qty:1 } → props passed to the client component #React #ReactJS #NextJS #ReactServerComponents #JavaScript #FrontendDevelopment #WebDevelopment #SoftwareEngineering #ReactDeveloper #FullStackDeveloper #ModernReact #CodingCommunity #DevCommunity #LearnInPublic #TechEducation

Excited to share my new blog post: "JavaScript Promises: From Pending Proposals to Bollywood Bliss – A Desi Guide to Async Magic"! Read it here: https://lnkd.in/gFK6YNem Hitesh Choudhary Piyush Garg Akash Kadlag Anirudh J. Chai Aur Code #JavaScript #Promises #AsyncProgramming #WebDevelopment #TechBlog #IndianTechCommunity

🧠 JavaScript Async/Await Challenge What will be the output? async function test() { console.log("1"); await Promise.resolve(); console.log("2"); } console.log("3"); test(); console.log("4"); Options: A) 3 1 2 4 B) 3 1 4 2 C) 1 3 4 2 D) 3 4 1 2 What do you think the output will be? 👀 #javascript #frontenddeveloper #webdevelopment #codingchallenge

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

This confused me for a while 😅 Can you tell what this will print? 👇 import { useEffect, useState } from "react"; export default function Counter() { const [count, setCount] = useState(0); useEffect(() => { setInterval(() => { console.log(count); }, 1000); }, []); return ( <button onClick={() => setCount(count + 1)}> Count: {count} </button> ); } After clicking the button a few times… what do you think gets logged every second? Curious to see your answers .. #Reactjs #javascript #frontenddev

🚀 Day 23 - Poll answer & Explanation 💡 **JavaScript Event Loop Explained (Simple & Clear)** ```javascript console.log('S'); Promise.resolve().then(() => console.log('P1')); setTimeout(() => console.log('T1'), 0); Promise.resolve().then(() => console.log('P2')); setTimeout(() => console.log('T2'), 0); console.log('E'); Output: S E P1 P2 T1 T2 ``` 🔹 **Explanation:** * `S` and `E` run first → synchronous code (call stack) * `P1`, `P2` → microtasks (Promises) → run next * `T1`, `T2` → macrotasks (setTimeout) → run last 👉 Microtasks always execute before macrotasks in the event loop. #JavaScript #ReactJS #WebDevelopment #Coding #FrontendDeveloper #InterviewPrep

globalThis One of the most useful additions to modern JavaScript is globalThis. globalThis is always the global object — no matter where your code is running. It was introduced in ECMAScript 2020 to provide a standardized way to reference the global object across different environments like: • Browsers • Node.js • Web Workers • And more

💡Difference Between State and Props in React 👉 Props → Passed from parent to child (read-only) 👉 State → Managed inside the component (mutable) Simple rule I follow : Props = external data State = internal data Understanding this made React much clearer for me 👆 #reactjs #javascript #frontenddeveloper #webdevelopment

I used to think React loads everything at once… until I learned lazy loading. 🤯 Now I understand how apps become faster and more efficient. ⚡ 💠Load only what is needed 💠 Improve performance 💠 Reduce bundle size Here are my notes for revision. ✍️ #React #JavaScript #LearningInPublic #FrontendDeveloper