Hi, I’m Shashank!

This blog is based on O’Reilly’s Mulithreaded Javascript book. Understanding the Fundamentals: Concurrency vs. Parallelism Before diving into workers, it is essential to distinguish between how tasks are managed: source: https://medium.com/swift-india/concurrency-parallelism-threads-processes-async-and-sync-related-39fd951bc61d Concurrency: Executing multiple tasks over overlapping time, though not necessarily at the exact same moment. In a single thread, this looks like tasks taking turns. Parallelism: This is concurrency in a multi-threaded environment where tasks run simultaneously. source: https://medium.com/swift-india/concurrency-parallelism-threads-processes-async-and-sync-related-39fd951bc61d The Synchronous Model: Each task must wait for the previous one to complete before starting. ...

What’s the issue? Webpack supports adding multiple entry points in an app. Entry Points page in documentation explains that a bundle for each entry point is created separately, which can help reduce load time by caching bundles that aren’t modified (e.g. node_modules). But having multiple entry points may lead to following error during hot reloads: ChunkLoadError: Loading hot update failed. One of my org’s repo had a long standing issue of hot reloads not working. Digging further into the issue, I found this solution on stack overflow of adding runtimeChunk: 'single' to webpack.dev.js. But there was hardly any explanation of what the other options for runtimeChunk actually did in simple words. ...

When writing unit tests using Jest and React Testing Library, you might encounter this error: Jest Worker Encountered 4 Child Process Exceptions, exceeding retry limit This usually signals that Jest retried your test multiple times across its worker threads but failed each time, eventually giving up. Here’s how I traced the root cause of this issue and resolved it. The Culprit: fireEvent and Asynchronous Side Effects At first glance, my test code looked fine. I was using fireEvent.click to simulate user interaction. But here’s the catch — while fireEvent is a synchronous function, the side effects it triggers (like state updates or calls inside useEffect) are often asynchronous. ...

Cells in a spreadsheet can form a chain of interdependent formulas, where a change in one cell triggers the reevaluation of the entire chain. For example, in the example below, changing cell A1 or B1 recomputes C1, which recomputes C2 and D1. A B C D 1 4 5 =A1+B1 =B1+C1 2 =C1 + 1 =C2 + 1 I’ll explain how Fortunesheet handles this by using Topological Sorting, and how I optimized its performance by 82%. ...

In React, you can use combination of Context and custom hooks to implement async modals. Async modals let you capture the response from modal asynchronously, saving the hassle of managing another state and improves readibility. Let’s try to build it from the ground up: 1. Bare bones App.js function App() { const [isModalOpen, setIsModalOpen] = useState(false); const onResponseClick = (response) => { setIsModalOpen(false); console.log(response); }; return ( <div> {isModalOpen && <Modal onResponseClick={onResponseClick} />} <button onClick={() => { setIsModalOpen(true); }} > Open Modal </button> </div> ); } To get the response (yes/no) from the modal, App component is forced to manage isModalOpen state and include <Modal /> component in its JSX. We know there is a better way to manage this by using Context. ...