I have a situation where one component change is supposed to update other sibling components under same parent. Should I use context or Redux for this? Or is it okay pass props around via callback function to parent and then to children?
CodePudding user response:
Redux is likely overkill if you only have a small hierarchy of a few components. Use React context to avoid prop drilling where you pass the same props through multiple layers. If you only have one layer, it's fine to use callbacks to pass to children.
If you need global access to this state use Redux (or similar). If you need more localized access to the state use React context.
To answer your question, since they have the same parent it's better to pass callbacks to the children.
CodePudding user response:
So here's my take on this situation. Both Redux and Context help with state management and propagation across components. So here's the deal
- Use
Redux
, if you want the data to be used outside the parent component. For instance, you want the state to be available across your whole application (Global Data or data that is required in 2 or more unrelated components). - Use
Context
, if only the children of the current component require the data. Not the siblings, not other components in the application - ONLY CHILDREN. - Use
props
to pass it down to children, only if your component tree is 1 or 2 levels deep. If it is more, useContext