Javascript

You’ve mastered memo, useCallback, and useMemo. Your components are optimized. Life is good. Then you add Context… and everything re-renders again. Welcome to the Context trap. How Context Works Every component using useContext re-renders when the context value changes. No exceptions. React.memo won’t save you. Your optimizations? Worthless. // ❌ This memo does NOTHING const UserProfile = memo(function UserProfile() { const user = useContext(UserContext); return <div>{user.name}</div>; }); When state in a context provider updates, React forces all context consumers to re-render, completely bypassing any memoization. ...

Ever wonder why your React app feels sluggish? Let’s fix those unnecessary re-renders. When Does React Re-render? Three triggers: Props change State changes Parent re-renders The catch? React does shallow comparisons. New object/function references = re-render, even with identical values. That’s where useMemo, useCallback, and React.memo save the day. The Problem // ❌ ExpensiveChild re-renders on EVERY keystroke function Parent() { const [count, setCount] = useState(0); const [text, setText] = useState(""); return ( <> <input value={text} onChange={(e) => setText(e.target.value)} /> <button onClick={() => setCount(count + 1)}>Count: {count}</button> <ExpensiveChild count={count} /> </> ); } Solution 1: React.memo // ✅ Only re-renders when count actually changes const ExpensiveChild = memo(function ExpensiveChild({ count }) { return <div>Count is: {count}</div>; }); Solution 2: Component Composition (Even Better!) Here’s the secret: you often don’t need memo at all. ...

This year I decided to solve the famous Advent of Code Challenge in both Python and JavaScript. I’m also gonna be posting my solutions on my GitHub repository. And while solving today’s advent of code challenge, in javascript. I came across a weird behaviour of the sort() function in javascript. I was trying to sort an array of numbers, and I was using the sort function like this: const myArray = myArray.sort(); then I console.log()ed it to see the result, and it was sorted in ascending order. But when I tried to sort it in descending order, it didn’t work. I tried to do this: ...

This small blog was sparked by a post that I saw: There are many posts like the above on the internet, and almost all of them are because of this type coercion thingy. So in this blog, I’m gonna try to explain what type coercion is and what’s happening in that post 😉. What is type coercion? There are 6 primitive data types in JavaScript: undefined, Boolean, Number, String, BigInt and Symbol. When you try to do things like adding two different data types together, JavaScript uses some rules to decide how it’s gonna coerce one type into the other type, to actually add them together. ...