GitHub Links To Coding Examples:😎 useReducer: github.com/LloydJanseVanRensburg/useReducer-Explaination useContext: github.com/LloydJanseVanRensburg/useContent-Hooks-Explanation Combined Todo List Project: github.com/LloydJanseVanRensburg/Todo-List-Context-Project- Going to make a similar video using Redux!
By far the best video I have seen on this topic, clear and concise. one small suggestion is that using a non-mechanical keyboard would help in hearing the voice much more clearly.
Great video overall. Thanks. A few thoughts about Context API + Hooks. So, as a result, we get global storage that: - looks like Redux (if you want at least basic type checking and modularity); - works like Redux (for the most part, even including the performance for the low-frequency updates) And yet, it lacks its debugging power and extensibility. The possibility of creating multiple storages (contexts) and no need for additional dependencies can be useful if you care about it.
Thanks A lot for explaining so well, I have gone through many videos even in our regional language but unfortunately I never understood, This video explained everything very clearly, Thanks again.
brother , thanks thanks ♥️ I was trying so hard to learn and understand reducer and context things from 4-5 months and nothing was making sense to me, eventually got the right video ♥️ and really understood the concept and used in my other ideas and they worked, thank you again ♥️
For instant error check, we could do "disabled={!todo}" inside the Add button and the button will be disabled if we do not type anything in the input element
I really appreciate you sharing your reducer coding pattern. When I do this, its always a mess. I'm gonna refactor a game to do this better . 😇 Thanks bro
I enjoyed the tutorial, the way you gradually walked through the concepts really helped me refresh things. I like how you separate functionalities into partials. Buut, wouldn't it make more sense to receive toggleTodo and deleteTodo from context inside TodoItem (pass text and id as props) instead of creating a bunch of anonymous functions when you map over the todo array in TodoList? Anyway, subbed!
Hey thanks for the sub and glad you liked the video. Yess you can totally do that as well you should just then pass the id of the todo in as props from the TodoList then yess you can pull in the deleteTodo and toggleTodo into the TodoItem component. Thanks for the comment🤓!!
I really love this tutorials. Explanation is like documentation. Keep going on. Can you make a e-commerce Shoping system(product variant change, color swacther, filter, size change, quantity, add to cart) using like this conext api and react reducer?
Hi, thank you so much for this gut explained video. I am wondering whether the usage of Context API in 2021 is the same. I see in some examples dispatch function much frequently
Liked and subscribed. What an amazing, well put and simply explained video. The only thing I'm unsure of is how to go about implementing multiple contexts for a large application if i needed lets say a context that stores user data, one that stores posts data, one that stores company data etc. Do you nest providers or what?
So yes you would "" nest them "" so at the part where we wrap the application with the context you can just do that with the next context section. Just make sure that the order in which the context are nested can be important if working with mutliple level that might depend on wach other
Probably not redux is much better for larger projects and has better structure and performance when working with large amounts of data. But that being said i do think that learning context will be more than enough for most applications. And you will also then be able to do redux so switching will be easy
This was a great tutorial! I've read online that there's also the redux toolkit, is it a big difference VS the usereducer + usecontext approach? Are your MERN tutorials using the usereducer + usecontext approach? Thanks
Yes it very much is basically the same👌. The biggest different is that Redux is used for more larger project and for projects where there are many frequent updates to the state, other than that is is basically the same.
@@the_full_stack_junkie I saw someone set up a template that dynamically took in the state. I was still very confused by state then, so I'll have to check that out and see how he did that again.
@@the_full_stack_junkie I went back an checked it out. It was actually a react native tutorial on Udemy so I can't share it, but it was not exactly what I thought. It is just refactoring the code you put in the state file, and making it a reusable function. Still doesn't solve the issue of multiple providers and contexts, but it does make it cleaner. I attached a quick example from my github, but in it I created multiple folders similar to your example. But it is still looked very clean and easy if you wanted to create one file with all the info instead of many... github.com/DigitalDevBOSS/React-Context-Reducer-Global-State
how should i dispatch actions with useEffect as opposed to by clicking/submitting as shown in the video ? I get caught in an infinite loop when doing that as dispatch is a useEffect dependency and a new dispatch gets created everytime state is updated and then useEffect runs inifintely... Do you have any advice ?
@@the_full_stack_junkie I pass down useReducer's "dispatch" and "state" using Context.Provider with value={{state, dispatch}} and one Component has a useEffect as follows useEffect(( ) => { dispatch(addNotification) }, [ dispatch ]) When dispatch runs in Component , it changes data in reducer and a new dispatch gets passed down in Context.Provider and that causes useEffect to run in an infinite loop. The problem is not there when i do just value={ dispatch }. New object reference is causing the issue. Can i use useMemo in Component ? I also need to pass down state along with dispatch. Should I shift to redux-tool-kit ? On RUclips I saw examples with mostly onClick and onSubmit for dispatching actions with useReducer + useContext approach but not with useEffect. Your input will be very valuable on the correct approach.
GitHub Links To Coding Examples:😎
useReducer: github.com/LloydJanseVanRensburg/useReducer-Explaination
useContext: github.com/LloydJanseVanRensburg/useContent-Hooks-Explanation
Combined Todo List Project: github.com/LloydJanseVanRensburg/Todo-List-Context-Project-
Going to make a similar video using Redux!
By far the best video I have seen on this topic, clear and concise.
one small suggestion is that using a non-mechanical keyboard would help in hearing the voice much more clearly.
I’ve watched about 15 videos on this topic, and yours is by far the clearest and best! Good job, sub’d!
Yeah he gave perfect way to use context api with reducer
This was the comment that got me curious about this video and eventually ended up watching several times. He did a real good work.
🙏
U know how to transfer knowledge in simple manner ,i can't belive u r just 6 months in to youtube . We need more teacher like u .
Thank you so much for this comment I really do appreciate it 🙏🤓
You're far better than the university professors here. Thanks so much. Sub'd
Wow appreciate the positive comment thanks
Great explanation. Totally worth watching 👌
Why would someone dislike this video though 🤦🏾🤦🏾..
This is well explained and very educative , i truly did learn something new from this
Wow thanks this comment means allot thank you very much!😇
By far the only videos that explains something on this topic
This is the BEST VIDEO that has helped me so far understanding this context and reducer hook! Thanks man, great teacher!
Great video overall. Thanks.
A few thoughts about Context API + Hooks.
So, as a result, we get global storage that:
- looks like Redux (if you want at least basic type checking and modularity);
- works like Redux (for the most part, even including the performance for the low-frequency updates)
And yet, it lacks its debugging power and extensibility.
The possibility of creating multiple storages (contexts) and no need for additional dependencies can be useful if you care about it.
Great overall summary of why Context is great for beginners and even little more thanks for this positive comment💪🔥
master class .. keep up guiding enthusiasts
OMG! You are born a teacher 😳
Thanks champ🙏
Dude I see that you are new - 3 weeks - but your content is really solid! I sub'd and will be following you!!
Thank you! Really Appreciate the comment 🤓
Thanks A lot for explaining so well, I have gone through many videos even in our regional language but unfortunately I never understood, This video explained everything very clearly, Thanks again.
brother , thanks thanks ♥️ I was trying so hard to learn and understand reducer and context things from 4-5 months and nothing was making sense to me, eventually got the right video ♥️ and really understood the concept and used in my other ideas and they worked, thank you again ♥️
Very glad this video was able to help you understand the topic better. Thanks for comment
Implementing this hooks on the most simple idea (fewer code) is really helpful to understand. Thanks!
I learned too much things clearly from this video, so a bundle of thanks to u sir...
Excited to be here!!
thank so much brother you save my life right now i understand well useReducer
Yo this was very helpful !!
This is the best video on globalContext with useReducer! Thank you. Subscribed
Very glad you found it helpful, thanks for the comment
You're great at explaining things in a simple, easy to understand way. Thanks a bunch for this amazing content!
Brilliant video sir, subscribed 🔥🔥
This truly is a work of art
you deserve more views on this video. Thank u !
For instant error check, we could do "disabled={!todo}" inside the Add button and the button will be disabled if we do not type anything in the input element
amazing tutorial
You are a cool teacher. Keep up your valuable contribution to React learners. Thanks.
thank you liked, subscribed and commented . you are amazing 🤩 😍
I really appreciate you sharing your reducer coding pattern. When I do this, its always a mess. I'm gonna refactor a game to do this better . 😇 Thanks bro
Magic indeed.
Thanks you so much for the tutorial mate, I learn a lot from you 👍
Sir please upload more videos on react .... it was really full of relevant content
I found this video is really helpful so I leave my comment here, thank you so much
Thanks for your comment💪🤓 glad it helped
We need more of your videos dude you are awesome ❤️❤️
Thanks so much big videos coming soon 💪🤓
This was so helpful. Thank you!
Thing to note! The entire tree re-renders on every context update. Even unrelated components, anywhere inside the Provider.
Excellent Tutorial ++++++++++++++
Excellent explanation of the topic, I felt lost but no more thanks to you.
I enjoyed the tutorial, the way you gradually walked through the concepts really helped me refresh things. I like how you separate functionalities into partials. Buut, wouldn't it make more sense to receive toggleTodo and deleteTodo from context inside TodoItem (pass text and id as props) instead of creating a bunch of anonymous functions when you map over the todo array in TodoList? Anyway, subbed!
Hey thanks for the sub and glad you liked the video. Yess you can totally do that as well you should just then pass the id of the todo in as props from the TodoList then yess you can pull in the deleteTodo and toggleTodo into the TodoItem component. Thanks for the comment🤓!!
Love from India
This is a replacement for redux really !!!
But i got to consider the new one => Redux/Toolkit. Found it interesting though.
Fuck dude after all the searching, i found something cleaaan ! thanks sir
great tutorial, doing really useful work
Thanks champ
I really love this tutorials. Explanation is like documentation. Keep going on. Can you make a e-commerce Shoping system(product variant change, color swacther, filter, size change, quantity, add to cart) using like this conext api and react reducer?
You're awesome, man!
Much love! ❤️
Thank tou appreciate that comment🤓👌
thanks for this amazing videoo
Pure gold. Thank you
🙏✌
Subscribed!!!! Sir you are doing great!
Thank you 🤓👌
just 50 mins, I know 70% of Reactjs
Hi, thank you so much for this gut explained video. I am wondering whether the usage of Context API in 2021 is the same. I see in some examples dispatch function much frequently
Yes from what i know it still the same. Redux on the other hand is using dispatch. This is because of the redux hooks.
great video, i just subbed.
Awesome glad you found it helpful 💪🤓
Liked and subscribed. What an amazing, well put and simply explained video. The only thing I'm unsure of is how to go about implementing multiple contexts for a large application if i needed lets say a context that stores user data, one that stores posts data, one that stores company data etc. Do you nest providers or what?
So yes you would "" nest them "" so at the part where we wrap the application with the context you can just do that with the next context section. Just make sure that the order in which the context are nested can be important if working with mutliple level that might depend on wach other
What you think, will this concept slowly replace redux ???
Probably not redux is much better for larger projects and has better structure and performance when working with large amounts of data. But that being said i do think that learning context will be more than enough for most applications. And you will also then be able to do redux so switching will be easy
when i am trying to do the same thing the color is changing to green when i click the login button 2 times and not on first time can you tell why??
Good content 👍
Thank you! Appreciate your feedback🤓
how about async when dispatch sir?
This was a great tutorial! I've read online that there's also the redux toolkit, is it a big difference VS the usereducer + usecontext approach? Are your MERN tutorials using the usereducer + usecontext approach? Thanks
This seems basically the same as Redux. Is there really a big difference at this point?
Yes it very much is basically the same👌. The biggest different is that Redux is used for more larger project and for projects where there are many frequent updates to the state, other than that is is basically the same.
@@the_full_stack_junkie I saw someone set up a template that dynamically took in the state. I was still very confused by state then, so I'll have to check that out and see how he did that again.
Would love to see this as well
@@the_full_stack_junkie I went back an checked it out. It was actually a react native tutorial on Udemy so I can't share it, but it was not exactly what I thought.
It is just refactoring the code you put in the state file, and making it a reusable function.
Still doesn't solve the issue of multiple providers and contexts, but it does make it cleaner. I attached a quick example from my github, but in it I created multiple folders similar to your example. But it is still looked very clean and easy if you wanted to create one file with all the info instead of many...
github.com/DigitalDevBOSS/React-Context-Reducer-Global-State
how should i dispatch actions with useEffect as opposed to by clicking/submitting as shown in the video ? I get caught in an infinite loop when doing that as dispatch is a useEffect dependency and a new dispatch gets created everytime state is updated and then useEffect runs inifintely... Do you have any advice ?
How does your dependency array look for the useEffect?
@@the_full_stack_junkie
I pass down useReducer's "dispatch" and "state" using Context.Provider with value={{state, dispatch}} and one Component has a useEffect as follows
useEffect(( ) => {
dispatch(addNotification)
}, [ dispatch ])
When dispatch runs in Component , it changes data in reducer and a new dispatch gets passed down in Context.Provider and that causes useEffect to run in an infinite loop. The problem is not there when i do just value={ dispatch }. New object reference is causing the issue. Can i use useMemo in Component ? I also need to pass down state along with dispatch. Should I shift to redux-tool-kit ?
On RUclips I saw examples with mostly onClick and onSubmit for dispatching actions with useReducer + useContext approach but not with useEffect. Your input will be very valuable on the correct approach.
@@the_full_stack_junkie Hey man do you have a solution for this
i hate how every example online is such simple examples
hey bro how are you using styles
Css modules.
I can't belive someone use redux instead of vue 3.
I ike your tutorial, but hate the fact that each tutorial does ContextApi differently, it is really hard to spot the pattern.
I think the goal is to understand what is does more than just seeing the pattern if you understand what it does then the pattern comes.
Mujhe laga tha react asaan hai 😂
Are you South African?
Yes I am. Guessing my English accent
makes that pretty obv haha
@@the_full_stack_junkie Mooi gedoen! Keep up the good work.
Dankie dankie 🤓👌
It's great to see more and more South Africans making solid content on RUclips! 🇿🇦
🇿🇦✌
Why is every example a fucking todo list? I need different examples to fucking learn.