React caches static imports internally.

React caches the static data that are imported. This is an advanced feature that made me grind for a while. I will explain from my understanding how this works following the codebase I faced issue with this topic. As I render two different components depending on the search mode, I import a static file mainMenu.js in both of the components and perform operations on them. As one mounts and other unmounts, it is supposed that during mounting, that componet will render from scratch using the data imported to it. But having that in mind, I faced some unexpected behaviours. For testing, I logged the length of a particular menu item in both the components to check if they are changing.

It is showing the correct length now (above the searchbox).

Now, if i give a searchterm, the menu is changing accordingly.

Now if i clear the searchbox, the <SidebarSearchMenu /> unmounts, <SidebarMenu /> mounts. And we should be seeing the whole menu from scratch. but it doesn’t. We see it holds on the menu file from the <SidebarSearchMenu /> and shows that.

Also, the length has changed now, which did not change when we actually searched. This is because menuData is a static file that is imported, not from state. So, as I have already mentioned in my previous blog that I was modifing the original mainMenu by mistake. That is why, as it is not in state, we don’t see that change directly as that part is not re-rendered by react as it sees no change in the virtual DOM. And when the whole component is re-mounted, that time we notice the change.

So, the issue can be solved just by using show = structuredClone(item); by not modifying the real mainMenu.js. That is the actual solution. But we are not discussing that. The discussing point is that even if the component is re-mounted, it is not showing the mainMenu from scratch. That means one thing. Even if the static file mainMenu.js is imported on two different components. And react brings in the mainMenu.js from the server, renders it in the DOM, it actually does not use that file for twice for two components, even if the file is present on the browser 😱**.** Even is the mainMenu.js file has been brought to the browser (verified by checking the network tab), it does not reach out to that file again. Rather, when it was first imported and stored in the browser memory, it refers to that memory location, when another component refers to the same file.

My observation is react does this for optimization purpose that rather than accessing the static file again and again, it holds the reference of the first time import of that file and uses that reference from further on. To test this theory, I even imported mainMenu.js in another different component, far from this this component on the render tree, and the theory was right!!. Even there the length was seen updated. Proving, When importing static files, React imports that file only once and from further it keeps using the reference to the initial import.

So, what are your observations? I learnt an internal mechanism of React.js by making a silly mistake. But it helped me understand the React mindset a bit better. On how react decides the rendering at the abstract level, the Virtual DOM.