should I pass the imported components as props or can I just import it directly in the subcomponent - React JS

Question

I am making a project with different pages, and each pages/main component of the page contains many subcomponents. I have been passing data as props, which is for the single source of truth as I learned it, but I think I misunderstood that concept, or not(?), because I also have passed the imported components from the parent component as props to the subcomponents to use them.

example:

import ReusableComponent from ../path
import SubComponent from ../differentpath

export default function MainComponent() {

<SubComponent Comp={ReusableComponent} />

}

is this wrong and I can just import the component directly to the subcomponent while maintaining one source of truth using props? The one source of truth idea threw me off. Thank you! I just do not want to proceed yet because the refactoring would be too many.

Answer 1

Having a single "source of truth" is useful for values that could possibly change, that you need to synchronize. For example, if you want to keep track of how many times the user has clicked anywhere, you might initialize a state for that in the root component and pass it down as a prop wherever it's needed.

But static reusable components don't change (at least, not if they're designed sanely). Whether the component is imported directly in the module it's used, or whether it's imported in a different module and passed down as a prop, doesn't make a difference; it'll work the same either way. As a result, it'd usually make sense to import the component only where it's going to be used.

import ReusableComponent from ../path
export default function SubComponent() {
  // ...
  return (
    <div>
      <ReusableComponent />
      // ...

You can pass components down as props if you want, but that technique is usually useful when the component is dynamic; if the component to use in the descendant is completely static, it'd make more sense to import it directly in the descendant.