developerasun
commented
2 years ago read this
The simplest way to pass data from a parent to a child in a React Application is by passing it on to the child's props. But an issue arises when a deeply nested child requires data from a component higher up in the tree. If we pass on the data through the props, every single one of the children would be required to accept the data and pass it on to its child, leading to prop drilling, a terrible practice in the world of React.
Comparing Redux & Context API
Context API | Redux
-- | --
Built-in tool that ships with React | Additional installation Required, driving up the final bundle size
Requires minimal Setup | Requires extensive setup to integrate it with a React Application
Specifically designed for static data, that is not often refreshed or updated | Works like a charm with both static and dynamic data
Adding new contexts requires creation from scratch | Easily extendible due to the ease of adding new data/actions after the initial setup
Debugging can be hard in highly nested React Component Structure even with Dev Tool | Incredibly powerful Redux Dev Tools to ease debugging
UI logic and State Management Logic are in the same component | Better code organization with separate UI logic and State Management Logic
From the table, you must be able to comprehend where the popular opinion Redux is for large projects & Context API for small ones come from.
research : what to choose for state management between Redux and Context
watch this