kirillzyusko / react-native-bundle-splitter

HOC for lazy components loading
https://kirillzyusko.github.io/react-native-bundle-splitter/
MIT License
428 stars 22 forks source link

How to do multiple imports of a third party component #39

Closed SamuelGuNUAA closed 2 years ago

SamuelGuNUAA commented 2 years ago

Hi @kirillzyusko , thank for the helpful library. But got a question as a first time user. I need to import a third party component in different files by different components, but not sure which is best way to do so.

For example: option 1) File A:

const ThirdPartyComponent = register({ require: () => require('rn-third-party-library') });
<ParentComponentA >
{ThirdPartyComponent()}
</>

File B:

const ThirdPartyComponent = register({ require: () => require('rn-third-party-library') });
<ParentComponentB >
{ThirdPartyComponent()}
</>

option 2) index.ts: export const ThirdPartyComponent = register({ require: () => require('rn-third-party-library') }); File A:

<ParentComponentA >
{ThirdPartyComponent()}
</>

File B:

<ParentComponentB >
{ThirdPartyComponent()}
</>

Could you advise which option should be taken or any better solution?

kirillzyusko commented 2 years ago

Hi @SamuelGuNUAA

For me second option looks more preferable, since you will have less code duplication :) I would recommend you to go with this option.

Though it's important to remember, that if you are trying to make some libraries lazy-loadable (such as react-native-reanimated, react-native-gesture-handler) - it may break your app (especially in release mode) 🙂