React-Redux mapStateToProps vs passing down parent props

Question

This may come off as a bit of a naive question, but I am new to react-redux and I'm learning as I go.

Context: Given that I have a react-redux application. In my top-level component I have this at the bottom:

function mapStateToProps({ auth }) {
  return { auth };
}

export default connect(mapStateToProps)(newComponent);

The 'auth' portion comes from my reducer index.js file:

import { combineReducers } from "redux";
import authReducer from "./authReducer";

export default combineReducers({
  auth: authReducer
});

So now this component has access to all the data that comes with auth, which in my application contains all the user information needed.

As my application got bigger I realized I needed the data from the authReducer in other components that were 1 or 2 layers down from the top-level component

My question(s) are: Is it better practice to connect the top-level component with the auth reducer, and pass down the necessary information to child components? What if a child 100-layers down needed information from the authReducer, would we still pass it down layer by layer?

OR would we just connect the authReducer as I did above to each component that needs it? Would that be expensive to do repeatedly?

Answer 1

The documentation touches on best practices around this topic: link. Relevant portion:

The current suggested best practice is to categorize your components as “presentational” or “container” components, and extract a connected container component wherever it makes sense:

Emphasizing “one container component at the top” in Redux examples was a mistake. Don't take this as a maxim. Try to keep your presentation components separate. Create container components by connecting them when it's convenient. Whenever you feel like you're duplicating code in parent components to provide data for same kinds of children, time to extract a container. Generally as soon as you feel a parent knows too much about “personal” data or actions of its children, time to extract a container.

In fact, benchmarks have shown that more connected components generally leads to better performance than fewer connected components.

In general, try to find a balance between understandable data flow and areas of responsibility with your components.