I've been working with react for a little while, and I found out react components heavily depend on one another which is not a good practice in my opinion. My question is whether there is a way to work around this.

Let's look at an example below where Header component depends on Banner component

```
import Banner from './../banner/Banner';
import HeaderInfo from './HeaderInfo';

class Header extends Component {
  render() {
    return (
      <div id="header">
        <Banner />
        <HeaderInfo />
      </div>
    ); 

  }
}

```

Suppose that there are 10 other components depending on Banner component, so if there are any changes to Banner component, for instance, adding a new prop, say, avatarUrl="/path/to/img" then Header component and all the 10 components would need to be altered to cater for the changes as follows

```
class Header extends Component {
  render() {
    return (
      <div id="header">
        <Banner avatarUrl="/path/to/img" />  // <--- new changes
        <HeaderInfo />
      </div>
    ); 

  }
}

```

This would lead to a nightmare when the number of components grows and changes need to be done in that situation. The aforementioned way of importing and using components results in tight coupling among components which contradicts to a norm that there should be tight cohesion within a component and loose coupling among components. 

I wonder if there's another way to connecting and using components that makes the dependence among component loose.

Thanks.