We are talking about two different topics here:
- importing same module multiple times
- using shared or individual state for multiple times imported module (you mentioned the Context API)
1. importing same module multiple times
Importing the same module inside multiple other modules is totally ok. Think about we are importing React in every file.
Here is a nice answer regarding this topic: ES6 import duplicates
Additionally, below I add an example with your nested structure
(B and C both import D, A imports B and C).
Here D is passed up from both B and C to A, so that both imports can be compared inside of A, and as you can see, both D are the same,
(console output: D_from_B === D_from_C: true):
// -- ComponentD.jsx --
import React from 'react';
export default function ComponentD(props){
return (<span>imported module ComponentD</span>);
};
// == ComponentC.jsx ==
import React, { useEffect } from 'react';
import ComponentD from './ComponentD';
export default function ComponentC( props ){
useEffect(()=>{ props.passSub( ComponentD ); },[]);
return (<div>
<p>ComponentC</p>
<ComponentD />
</div>);
};
// == ComponentB.jsx ==
import React, { useEffect } from 'react';
import ComponentD from './ComponentD';
export const ComponentB = (props)=>{
useEffect(()=>{ props.passSub( ComponentD ); });
return (<div>
<p>ComponentB</p>
<ComponentD />
</div>);
};
// == ComponentA.jsx ==
import React, { useEffect } from 'react';
import { ComponentB } from './ComponentB';
import ComponentC from './ComponentC';
let componentDfromB = null;
let componentDfromC = null;
export const ComponentA = (props)=>{
useEffect(()=>{
console.log('D from B === D from C:', componentDfromB === componentDfromC); // <--- true
console.log('Object.is(DB, DC):', Object.is(componentDfromB, componentDfromC)); // <--- true
});
return (<div>
<ComponentB passSub={ function( Sub ){ componentDfromB = Sub; } } />
<ComponentC passSub={ function( Sub ){ componentDfromC = Sub; } } />
</div>);
};
Remark: this code shall only illustrate the point. This approach usually does not work properly in a normal App (e.g. setting componentDfromB inside the callback.)
2. using shared or individual state
So, the imported modules are the same. But the state is not.
The imported "thing" is a React.Component, not a React.Element, which is similar to the relation class vs. instance.
If the React.Component D was imported, it is instantiated inside the component which has imported it, so each importing component (B and C) has its own instance of D, with a separate, own state. But that is usually exactly what you want.
If you want to share the same state across different components, you would use techniques like context, redux, passing props, ... I think the details are outside the scope of this question.
So what about performance...
I would say performance is just no issue here, not regarding module import, and not regarding state.
I think nobody really chooses one over the other here discussed approach for performance reasons, but for data structure or code cleanliness (of course, a bad data structure might have a bad performance, but that's not the "fault" of the React-state).
If you are still curious about performance, I think that should be a separate, more specific question about something like "performance state vs. props".
