DEV Community

Discussion on: Caching Component data in React

Collapse
 
washingtonsteven profile image
Steven Washington

So, our cache object keyedNodes is an object with id being used at the key.

nodes is data from whatever data source you need to pull from, and you may not have control over what format it is in (think a list of records from MongoDB).

Depending on the size and how many nodes you are accessing, you could pre-process the nodes array to build the entire cache up-front. That would be good if you know you are going to visit a majority of the nodes.

Sidenote: In my specific case, I was looking to represent a sort of graph, and I chose a flat array structure for it instead of potentially incredibly deep nesting:

{
  id:"0", 
  content:"Node 0",
  next:{
    id:"1",
    content:"Node 1",
    next: {
      // ...and so on - this can get very deep!
    }
  }
}

vs.

[
 { id:"0", content:"Node 0", next:"1" },
 { id:"1", content:"Node 1", next:"2" },
 { id:"2", content:"Node 2", next:"3" }, 
  // ...and so on
]

The second option seemed much better for me while building out the data.
I also chose a sort of on-demand caching strategy because it's possible to skip several nodes or loop back while a user is going through the data (which is for a sort of choose-your-adventure web game).

Collapse
 
hrtummala profile image
Hemanth

Steve,Is the combination of caching , pagination and search a better option in your case? All the checked nodes go to cache and search probably might help bringing in lesser nodes to navigate?