Connecting components to redux global state v.s passing props down to children components in React-Native

Question

I'm having trouble understanding when I should be passing props down to child components rather connecting those components directly to the state.

There are two ways that components in my project receive props:

1) Connecting a component (child or parent) to the global state of redux. This allows me to specify which parts of the global state my component will receive, but will re-render when a prop changes.

const mapStateToProps = state => ({
    error: state.error,
    progress: state.scan.progress,
    latitude: parseFloat(state.enrollment.latitude),
    longitude: parseFloat(state.enrollment.longitude),
});

export default connect(mapStateToProps)(MapViewHome);

2) Passing props down to child components in typical React-Native fashion.

<MapViewHome error={this.props.error} progress={this.props.progress} latitude={this.props.latitude} longitude={this.props.longitude} />

The reason I'm asking this is because I have parent component A which is connected to the state.

Parent component A passes prop x directly to child B which passes the same prop x to child C.

If prop x changes, this will cause components A, B, and C to re render. I could avoid the re rendering of components A and B by connecting child C directly to the state, so that it is the only component effected by the prop change.

But is it good practice to connect small child components to the global state like that? Why not just connect every component to the state?

The solution is to use context api. You can read about it more in the docs and tutorials — Pritish Vaidya

Magnum Magnum · Accepted Answer · 2018-09-19T20:54:24

This is a complex issue that the redux / react community discuss a ton.

You can probably find tons of Medium articles and React / Redux authors that discuss this.

But to give you a high level overview; If it seems like it's a pain to 'drill' props down from CompA -> CompB -> CompC -> CompD, store the data in redux.

If the data only needs to go from CompD -> CompE, you can pass it down as props.

You could store every prop that needs to be shared into redux as well. Just be aware of managing your redux object and try to normalize and manage the giant object.

Ultimately, it is up to you as the developer to make these decisions, as there is no silver bullet for this answer.

Connecting components to redux global state v.s passing props down to children components in React-Native

3 Answers