Conception
React Context API is a way to essentially create global variables that can be passed around in a React app. This is the alternative to “prop drilling”, or passing props from grandparent to parent to child, and so on. Context is often touted as a simpler, lighter solution to using Redux for state management
Context provides a way to pass data through the component tree without having to pass props down manually at every level.
Advantage
– Context API doesn’t require any third-party libraries.
– Optimization on project’s overall structure and speed side.
– Stable management for state:
( To a good extent, Redux works for state management in React applications and has a few advantages, but its verbosity makes it really difficult to pick up, and the ton of extra code needed to get it working in our application introduces a lot of unnecessary complexity.
On the other hand, with the useContext API and React Hooks, there is no need to install external libraries or add a bunch of files and folders in order to get our app working. This makes it a much simpler, more straightforward way to handle global state management in React applications. )
Application
In many case, we use Redux as choice for state management, But sometimes, Redux may be non-suitable for developer’s needs.
I used context and consumer in main components of React project, and after defining context, it will provide all state and actions needed.
The result is very similar with Redux.
Mostly, React context has used as combination type with React hooks, here is reference link:
https://www.hoseinh.com/react-context-vs-redux-hooks/
Regarding comparing between Redux and React context + Hooks, Context can’t still kill Redux, but I think it might be more useful in proper case.
Thanks.
Reference
https://reactjs.org/docs/context.html
https://www.taniarascia.com/using-context-api-in-react/
https://blog.logrocket.com/use-hooks-and-context-not-react-and-redux/
