Overall good article, but I have a big problem with this statement:
The Context API is the state-of-the-art way to manage state in React. It is an alternative to Redux, MobX, and a large variety of state management libraries made by the community.
No, Context API is not an alternative to Redux or MobX, Context API is not a state management tool, it has absolutely nothing to do with managing state.
Context API and state management libraries are supposed to solve two completely different problems.
State management library is intended to, well, manage state, so set the state, read the state and update the state.
Context API is intended to share a piece of data across many React components without prop-drilling. (Context does not "manage" anything)
Not only useState. You have the useEffect hook, an essential hook for every context & hooks back-of-the-frontend code, the useMemo and useCallback hook that I highly recommend you to understand, and a lot more you can do with those.
You are right. I took a deep look of hooks.Basically, I noticed React separate the whole html, css structure from data. Then we can store data ,change data, update data, share data. That is state management, and all hooks serve for that.
You absolutely wrong, thanks God we have RFC to mange context state changes github.com/facebook/react/pull/20646
Wait for a while to have ability to remove any state managers from your React app.
It's a pull request for an experimental feature therefore it's not really relevant to this discussion.
And even if this was already available in the stable version it doe not make Context a state management tool since it lacks the ability to do anything with the state it distributes.
To make things clear, Context API consists of(as of right now):
createContext method
useContext hook
And those provide you with a Context Provider, Context Consumer and the Context value.
None of the above allows for managing the state, there is nothing that would allow for updating state or adding side effects.
This feature definitely will be added in stable version. Second argument as comparator will allow you to check is the target value in context is really changed. Isn't it the state manager behavior?
UPD: Oh, God, I was the one who was totally wrong. Don't believe empty promises, everybody, peace!
let Bio = {
username: 'hyggedev',
fullName: 'Chris Hansen',
bio: 'I create⚡️ fast modern, client-side websites with React and Javascript.',
passion: ['Blog', 'Tweet', 'Code']
};
Hey great article D: So just to clarify, Context is not for state management, as you can handle state anyway you like, but the ContextProvider allows you to have access to that data anywhere without prop drilling? Is my mind in the right place? I know how to use it, I just hope I know WHY I'm using it LOL. Thanks ahead.
You are correct, except Context Provider does not allow to have access to that data anywhere. It's only within React Components that are descendants of that Provider.
What's most important Context does not give any option to access it's data outside the React tree (Redux and other State Management library do)
let Bio = {
username: 'hyggedev',
fullName: 'Chris Hansen',
bio: 'I create⚡️ fast modern, client-side websites with React and Javascript.',
passion: ['Blog', 'Tweet', 'Code']
};
Overall good article, but I have a big problem with this statement:
No, Context API is not an alternative to Redux or MobX, Context API is not a state management tool, it has absolutely nothing to do with managing state.
Context API and state management libraries are supposed to solve two completely different problems.
State management library is intended to, well, manage state, so set the state, read the state and update the state.
Context API is intended to share a piece of data across many React components without prop-drilling. (Context does not "manage" anything)
You are absolutely right. Hooks are responsible for the state management in those examples.
Not only useState. You have the useEffect hook, an essential hook for every context & hooks back-of-the-frontend code, the useMemo and useCallback hook that I highly recommend you to understand, and a lot more you can do with those.
You are right. I took a deep look of hooks.Basically, I noticed React separate the whole html, css structure from data. Then we can store data ,change data, update data, share data. That is state management, and all hooks serve for that.
You absolutely wrong, thanks God we have RFC to mange context state changes github.com/facebook/react/pull/20646
Wait for a while to have ability to remove any state managers from your React app.
It's a pull request for an experimental feature therefore it's not really relevant to this discussion.
And even if this was already available in the stable version it doe not make Context a state management tool since it lacks the ability to do anything with the state it distributes.
To make things clear, Context API consists of(as of right now):
And those provide you with a Context Provider, Context Consumer and the Context value.
None of the above allows for managing the state, there is nothing that would allow for updating state or adding side effects.
This feature definitely will be added in stable version. Second argument as comparator will allow you to check is the target value in context is really changed. Isn't it the state manager behavior?
UPD: Oh, God, I was the one who was totally wrong. Don't believe empty promises, everybody, peace!
Hey great article D: So just to clarify, Context is not for state management, as you can handle state anyway you like, but the ContextProvider allows you to have access to that data anywhere without prop drilling? Is my mind in the right place? I know how to use it, I just hope I know WHY I'm using it LOL. Thanks ahead.
You are correct, except Context Provider does not allow to have access to that data anywhere. It's only within React Components that are descendants of that Provider.
What's most important Context does not give any option to access it's data outside the React tree (Redux and other State Management library do)
Ahh okay gotcha. Perfectly said, I get it now. Thanks! 👌
Well in React documentation its written React Hooks has been created to manage state and prevent from using 3rd party libraries like Redux