is it okay to pass large variable into React state?

Question

I have an array containing 'profiles' shown below. This is stored in a variable that is exported and I then want to render these in my component.

const people = [
  {
    name : "Chuck",
    image : "./chuck.png",
    skill : "Bowling"
  },
  {
    name : "Arno",
    image : './arno.png',
    skill : "backflips"
  }
]
export default people;

I import the variable (bare in mind it contains hundreds of data points) and in my components constructor I use the following,

constructor(props) {
    super(props)
    this.state = { data : people }

To render these I then use map to map these into a card component

render() {
    let cards = this.state.data.map(function(elem, index) {
      return (
        <Card
          name = {elem.name}
          image = {elem.image}
          skills = {elem.skill}
          key = {elem.name}
          zIndex = {1000-`${index}`}
          />
      )
    })
return (
        <Card {pass in props (name, image, skills) to child Card component} />

My question is, is this bad practice? Everything works fine. The app is similar to a dating app UI where the first card, or element in the array is popped off and we are presented with the next card. How else would you pass in a large array to use and render elements in a component?

I hope its clear what i'm doing here. Thanks

Answer 1

Having large data in React state is perfectly fine. There isn't really a limit to what you can store there and React state itself doesn't put any type of limitation on the size it can store.

The issue with large data sets appears with rendering such data. If you have for example a table that needs to render thousands of rows, it will slow down the browser. We're talking about thousands of entries though, hundreds shouldn't be a problem at all.

If you find yourself having to render thousands of data points, you can use components/libraries that help with this such as React Virtualized, which will only render the needed elements, rather than all of them.

As you can see, the problem is not what you store but what you render. My recommendation is to not worry about what you're rendering until you notice a performance issue, once you hit that point you will need to start optimizing.

Unless you're sure you will have a performance issue, optimizing from the start can make you lose time better spent elsewhere.

Answer 2

The size of the contents of the object doesn't matter in terms of storing it in state. The object isn't copied, it's referenced.

But if people isn't managed by the component, then it isn't part of the state of the component, so state isn't where it should be. The component should just close over an import of that data, or use a context representing that data, or receive it in props, etc.

Answer 3

To answer your question specifically, storing an array of objects in state is the React way.

React's documentation does not have an array of objects but Lists are made out of arrays stored in the state as in here https://reactjs.org/docs/lists-and-keys.html

It is good to note though, that it all depends on the use case and how your app will be using such state :

• If the data never changes, it's preferable to have it in a separate variable outside of state.
• If it changes and the data is not hindering performance, it is ok to have it in state.
• If you start seeing that it would be better to have some optimization, you could look into a number of paradigms like pagination, caching, removing none-shown items from a list and so on.