Posts

Showing posts from November, 2025

Inside the JavaScript Memory Box: Visualizing Variables, References, and Copies

Image
There is a difference in the way JavaScript refences variables based on whether they are primitive or non-primitive Primitive Types: string, number, bigint, Boolean, symbol, null, undefined Non-Primitive: Arrays, Objects Each variable in JS is stored in a memory “box” Assignments: But when another variable tries to assign this value, JS thinks “wait, is this a primitive or non-primitive? Because if it is primitive, I will create a new box for this new variable with the same content. But if it’s not, I will just create a refence to the existing box” PRIMITIVE: Analogy: Let's say you have a note that says 5. You give a copy of this note to your friend.  Friend now updates this copy to 10. But your copy still says 5 let a = 5; let b = a; b = 10; //a remains unchanged NON-PRIMITIVE: Analogy: Let's say you have a note with address "123 Elm Street". In that house lives a cat named "Tom". You give a copy of this note to your friend. Friend now goes t...

React: Dont's in Hooks

useEffect()  1. When the value of a variable is already derived from an existing state. 💡: React anyway renders the component again with the latest state value. No need to again watch for changes in useEffect() Use case: Call an API when the count value changes export default function UseEffectDemo () {     const [ count , setCount ] = useState ( 0 );     const handleClick = () => {         setCount ( count + 1 )     }     const callAPI = () => {         return `/api/data/ ${ count } ` <--- NO need to do useEffect(() => {}, [count])     }     return (         <>             { count }             < button onClick = { handleClick } > increment </ button >             < p > Calling API { callAPI () } </ p > <--- Calling ...