is it okay to pass large variable into React state?

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.

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.

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.