ReactJS performance: Is it smart to pass a large amount of data through props?

Question

React

I am creating a multilingual application. To enable isomorphic rendering with a particular language, it is necessary to deliver data to components via props.
I have two options:
1. Pass only locales ( en, ruetc...) through propsand import the whole language file in each component. The result will look something like this: lang[this.props.locale].A_SPECIFIC_VARIABLE_NAME
2. Import the language file only in the very first component, define the language there and pass to all other components the entire dictionary of one language ( lang[locale]) to all components. The result will look something like this:this.props.lang.A_SPECIFIC_VARIABLE_NAME
The second option is more convenient, but I'm worried about the amount of data. The language file is not too big (~50kb for each dictionary), but it's still incomparably larger than the usual amount of data transferred via props. And how will this affect small components that can be rendered in dozens?

Answer 1

There is no fundamental difference between 1) and 2), in both cases references to objects are used.

Answer 2

I would use option 2, but pass the data through the context. It's much more convenient.