Posts

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. ...

I revived an archived project and released it as FortuneExcel - a plugin for FortuneSheet to import/export Excel (.xlsx) files. Initialization Reviving the project meant fixing the deprecated code and existing bugs. Along with this, I added export feature, toolbar plugin support for fortune-sheet and set up Github workflow. Modularization While implementing a package, it should have maximum abstraction. User should have to add minimal code to their environment for your package to work, all while having no side-effects on their existing code. A proper code strucrure also makes it easier for others to contribute to your code. ...