Updating file map causes excessive renders, destroying icon animations

[nh2]

The way Chonky uses React causes React updates when it probably shouldn't.

For example, running the code

newFileMap["myFile"] = { ...newFileMap["myFile"] };

(which is a no-op change) once per second, causes all spinning icons to regularly reset their rotations (see e.g. the tree icon):

chonky-updating-name-resets-all-spinners.mp4

In my case, the "myFile" I'm updating isn't even shown; it is inside the folder test-upload-dir3.

For the video, I have enabled updated [x] Highlight when components render in the React DevTools, so that one can see what gets rendered:

It shows that even completely unrelated parts of the UI, such as the breadcrumbs at the top, re-render.

So the issue here is that changing the file map in any way, e.g. updating some file's name or icon, will rerender all of Chonky, thus resetting all spinning icons, resulting in ugly visual effects.

Is there something that could be done against that?

I think the best behaviour would be if Chonky only re-renders the parts that actually change, e.g. if a file's name is changed, only the name should be re-rendered, and its icon, as well as any other files, should be unchanged.