ReactJS performance: is it ok to pass a lot of data through props?

Question

I'm implementing multilingual app. In order to make isomorphic render with selected language possible, i need to pass data through props directly to components. I have two options:

1. Pass only locale (en or ru etc...) through props and import language file in each component. Result will look like: lang[this.props.locale].A_SPECIFIC_VARIABLE_NAME

2. Import language file only in root component, define locale also there and pass whole language file through props to each component. Result will be:
this.props.lang.A_SPECIFIC_VARIABLE_NAME

I like the second options more, but i'm worry about performance. Language file is not very big (~50kb for each language), but this is a lot anyway.

Answer 1

In javascript, objects are passed by reference, primitive values are passed by value (string, number, boolean, symbol, null, undefined) . This means that for every function call, separate places in memory are allocated to store primitive values that are passed as arguments.

Usually this shouldn't be a problem, unless these functions stay in memory concurrently for a longer period of time (which could happen through closures).

Such cases could result in extra memory consumption. However, your memory consumption will generally not increase dramatically, unless you are talking about very large numbers of function calls.

Other considerations

However, there are other reasons why you might consider reducing the amount of arguments (or in this case props) that are being passed to function or component. For example, general rules for the amount of arguments a function takes apply here. Needing more then 5 props usually indicates that you should do one of the following to keep your code concise and maintainable:

Encapsulate complexity into child components

Identify parts of your component that implement a specific detail. For example, instead of passing multiple primitive values to use some user information, you could create a separate component and pass it an object containing all the primitive values by using context, or by using a container component (when using redux).

It is generally recommended to only use context for static data that can be globally applied in your application.

Pass objects as props instead of primitive values

When passing multiple values as props to a component which are part of one anatomical structure, you could pass them together as an object. for example in a list of users: props userName and userEmail would reduce to props user taking an object with all the user its properties.

Now these properties are not copied locally into each component. Using props.user.name would directly reference to the original address in memory.

Use context instead of passing down props in your component tree

When you are passing down props to child components without using them in the component itself, you could use context to make the props available in your child components.

However, you should keep in mind that using context too much will make your code harder to read.

It is usually better to use container components that fetch your data, format it and pass it to the actual (presentational) component.