React re-renders: Context Trap 💣
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. ...
React re-renders: Stop the Madness 🎯
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. ...
What's Wrong with JavaScript sort() Function 🤔
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: ...
No Collision Guarantee 🔒
Designing No Collision Guarantee System. So for the past few days, I’ve been trying to build a distributed highly scalable, no collision guaranteed URL shortening service. The Architecture So if you pass in a long url called https://longurl.com, the backend will send you a short url that would be unique to each request, and the structure of the url would look something like: https://shorturl.com/[slug]. The slug is our main component, it should always be unique. ...
Visual Regression Testing of Ceph Dashboard
This summer I worked with The Ceph Foundation under Google Summer Of Code ‘21 (GSoC) programme. Google Summer of Code is a global program focused on bringing more student developers into open source software development. Students work with an open source organization on a 10 week programming project during their break from school. In this blog, I’ll share my journey of completing the project “Visual Regression Testing of Ceph Dashboard”. ...
Type Coercion In JavaScript 🍭
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. ...
Node.js To The Moon 🚀
Scaling your Node.js app like a boss Is Node even Node, if you’re not running a Node process on every CPU core of your machine 😁? So a little history: JavaScript was created out of the rapidly growing demand for dynamic content on the web, it was designed to do simple things like creating a colourful mouse trail or to validate forms. It was only in 2009 that Ryan Dahl, creator of Node.js, made it possible for developers to use JavaScript to write back-end code. ...
My First Post
Welcome Yes, if you can see this, you’re seeing my first post where I painfully spent hours trying to set up hugo and tweaked to my liking💖!