React - Updating useState as a Multidimensional array.
Hi, I am looking at the performance consequences of managing a state via a Multidimensional array.
Currently, I am representing a 15x15 grid as a multidimensional array, each cell (gridName[row][col]) contains five "key:value" pair pieces of data about that particular cell. When a user clicks a cell, it calls the useState function to update the contents of the key:value pair for that cell, and depending on the update, it may also update another cell; this updates are then used to change the visual data within the cell. This is done by returning a new version of the array. This is my first react project, so I am wondering what the performance impact of this may be, as I can't seem to find a better way to do it, and in the dev console, each update is around 4ms. Also note, that the grid size will always be 15x15, so larger grids aren't an issue.
4 Replies
from your description, for me it seems the right approach. If you are concerned about the amount of time it takes, there might be some options to simplify the logic of your changing data and reduce the amount of time it takes. But for that you'll have to share it. (or at least some mockup). If possible you can make a sandbox with an example (for us that's the easiest way to fiddle around with it)
Hi Mark, thank you for your quick response; that gives me more confidence! It will be a simple case of keeping track of the performance metric. I don't feel comfortable sharing the code yet, as the concept I am working on is novel. During my initial design phase, React seemed the most suitable way forward, it just meant learning a new approach 😄 . Once the project is in a state I am happy with, I intend to publish it on my site and make the source code publicly viewable on GitHub. I will surely add a link in the showcase thread in the future. If you notice it and feel improvements can be made, then by all means!
No problem. Good luck with the project
It might be a situation for useReducer(), but the performance should be similar and useState() will be easier in a first project.