Not sure i can provide a right or wrong answer for this question as each has its pros and cons.
My rule of thumb is to connect deeply nested components only when their parents are "proxies of props". That is they accepts props only to pass them down to their children.
If i may quote (myself) from this answer:
Avoid connecting components when you can and pass down the props to the children, the main reason for this is to prevent dependency on redux. I prefer keep my components "dumb" as i can and let them concern only on how things should look. I do have some components that concern on how things should work and these components are mainly dealing with logic and passing down data to the children, they are the components i often connect.
When i notice that my app is scaling and some of my components are acting as a proxy of props (i even got a word for that! "Propxy"), that is they get props from their parent and pass them down without using them, i usually inject a connected component in the middle of the components tree so i can let the "propxy" components down the tree flow be more lighten and slim
You should also note that one more pitfall with connected components is that each render will trigger the
mapstateToProps method. if you got some heavy logic there you should memoize it, usually done with reselect
As for the benefit of connecting a component, well you probably realize that already. you get quick access to the
Provider's state via react's context.
As a followup to your comment:
about the rendering - wont I have much more unnecessary rendering if Ill have a deep nested children (common in medium to large apps) that will be unnecessarily re rendered on each parent update
connect HOC wrapper won't trigger a re-render if the previous object of
mapStateToProps is the same as the current object returned. so no unnecessary re-renders to your connected component will take place.
You can read in more details on how it works and how the logic was evolved over time in this article
I use the first option. The cons you wrote are correct, but i think its easier to debug and understand the data flow this way.
- Don't connect a component to redux if the current component doesn't use this data from redux and only passes.
- If the component uses data then connect to redux.
- If the current component uses data from redux and the next component also uses it then you can pass and don't need to connect the next component to redux.
MAIN RULE: if there is a gap in the data usage chain from parent to child then don't need to pass data from parent to child
connect(parent) (don't use props) => child (don't use) => child (don't use) => child (using) - better to connect last child. Isuue related to props dreeling
- Connecting child components to store vs connecting parent component to store and passing down props
- React Router returns child components and not parent component
- How do I select all Child Components from my Parent Component and then uncheck a few while retaining the other checked components?
- ReactJS Flux: detect store data change between components (not parent and child relationship)
- How to send array of objects data from child component to parent component and store in the parent object using react hooks?
- Prevent child component from unmounting and remounting if parent component changes
- Can we pass setState as props from one component to other and change parent state from child component in React?
- CSS Modules & ReactJS: Parent and child CSS classes in different components
- React refs when parent and child are function components
- React - How do i force child components to re render when parent state component changes?
- How to avoid rerender all child components which in loop when parent component state update
- Delay parent component render till all the child components render reactjs
- Using specific child components with a generic parent component
- How to make React.js fetch data from api as state and pass this state data from its parent to child component
- Updating parent component only after multiple child components have completed running
- MapStateToProps and MapDispachToProps in parent and child components not working
- Ensure component can only child of specific parent components
- How can I access child components values from a parent component when they are added dynamically?
- Why is rendering the parent component and the child trying to enter the child component
- How to make an http call in parent component to setState and then send the state to all child components?
- how to set react parent component state by a async function and then pass this state to child as props?
- Update parent state from child component and re-render this child when parent state is update
- How to pass a function as props when both Parent and Child component also a functional component?
- react stateless child components do not update on state change in parent component
- How to update parent state and child components props at once (at the same time)
- Child component removed by parent still gets store change event
- Callback Function Between Parent and Child Component
- Function passed and invoked in child component doesn't have access to parent state value
- conflict 'this' references of child and parent components
- NextJS: data fetching in child component and pass to parent component
More Query from same tag
- How can we send OAuth2.0 with axios in React js
- Why useContext doesn't re-render the component - React.js + Laravel
- How to clear custom message created by error boundary when I navigate to other router pages
- Why I cannot access my react app dev environment from another computer
- Dispatch right after another dispatch overwrites state
- React Native Navigation / Context API
- Reactjs, Typescript - Casting props in typescript - React Component
- Material-UI React: Global theme override for Paper component
- "Attempted import error: 'authReducer' is not exported from './authReducer'. "
- Cannot read property 'destination' of undefined when react state is an array
- React-Redux: Why does the fetched data array always have length 1, even if it contains no data?
- React: Can I check if a state exists before rendering it
- How to reduce spacing between antd Form.Items?
- TypeError: Failed to fetch with input text
- Respond to a Single Redux Action in Multiple Reducers redux
- react js set state from parent to child component
- How to hard code simple authentication (no backend) and redirect to home page - React
- Reactjs routing to home page after login success
- ElectronJS React custom menu Event is not defined
- memoizing lodash isEqual or comparing prop objects
- How to render data in react getting undefined state?
- how to display an array element wise in a component of React js?
- Looping over array: ReactJS Objects are not valid as a React child
- Material UI Autocomplete: Display part of selection
- audio.play is not a function error from arrow function component using ref
- Uncaught TypeError: Object(...) is not a function at eval (global-styles.js)
- How to fix, does not wait for a respons, but begin to render
- How can I get `value` by clicking from the child tag?
- how to setup jsfiddle for react
- Axios post spotify api request return 400