React - how much can I safely store in this.state?

JavaScript
#1

I’m fiddling around with React, and I want to create a calendar app that will hold several events per calendar day.

I’m thinking my state would look like this:

this.state = [
{ 
date: '01-01-2019'
{event: 'blah blah blah', notes: 'this and that'};
},
{
date: '01-02-2019'
{event: 'blah blah blah', notes: 'this and that'},
{event: 'gib gib glab', notes: 'here and there'},
{event: 'nope nope nope', notes: 'yes indeed'};
}
-continued to 12-31-2019-
]

Offhand, that seems like a huge amount of data to leave in state.

I really only want it to render 30 days at a time, but I also want to go backwards and look at historical events too.

But, I guess I really want to know what the practical limits are…

#2

It’ll handle it totally fine. JavaScript is fast, computers are fast, that isn’t really a lot of data to shove in memory.

Are you storing that calender somewhere though? Because in reality it needs that data stored somewhere. And generally keeping everything in a big blob causes problems with accessing and updating, so it’s normally better to think a bit more about data structure & to ask for specific data (ie here you have to ask for all the data, then when it gets updated you have to ask for it all again etc etc)

1 Like
#3

If you want small data in the store, just split this parent component into smaller components, but it’s not big deal to have bigger data in the store.

#4