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.
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.
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.
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 ♥️
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
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 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🤓!!
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
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
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
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
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 TH-cam 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.
![[DRIP] ‘Love, Maybe’ PREVIEW](http://i.ytimg.com/vi/U7hwHp95m1k/mqdefault.jpg)
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.
🙏
Great explanation. Totally worth watching 👌
By far the only videos that explains something on this topic
master class .. keep up guiding enthusiasts
thank so much brother you save my life right now i understand well useReducer
Brilliant video sir, subscribed 🔥🔥
This is the BEST VIDEO that has helped me so far understanding this context and reducer hook! Thanks man, great teacher!
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.
Yo this was very helpful !!
Implementing this hooks on the most simple idea (fewer code) is really helpful to understand. Thanks!
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 🤓
thank you liked, subscribed and commented . you are amazing 🤩 😍
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!😇
You're far better than the university professors here. Thanks so much. Sub'd
Wow appreciate the positive comment thanks
This is the best video on globalContext with useReducer! Thank you. Subscribed
Very glad you found it helpful, thanks for the comment
I learned too much things clearly from this video, so a bundle of thanks to u sir...
This truly is a work of art
amazing tutorial
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💪🔥
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
you deserve more views on this video. Thank u !
This was so helpful. Thank you!
Thanks you so much for the tutorial mate, I learn a lot from you 👍
You are a cool teacher. Keep up your valuable contribution to React learners. Thanks.
Excited to be here!!
You're great at explaining things in a simple, easy to understand way. Thanks a bunch for this amazing content!
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 🙏🤓
Sir please upload more videos on react .... it was really full of relevant content
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 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 💪🤓
great tutorial, doing really useful work
Thanks champ
Excellent explanation of the topic, I felt lost but no more thanks to you.
Magic indeed.
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
OMG! You are born a teacher 😳
Thanks champ🙏
Subscribed!!!! Sir you are doing great!
Thank you 🤓👌
Excellent Tutorial ++++++++++++++
You're awesome, man!
Much love! ❤️
Thank tou appreciate that comment🤓👌
Pure gold. Thank 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🤓!!
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
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?
thanks for this amazing videoo
Fuck dude after all the searching, i found something cleaaan ! thanks sir
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.
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
Love from India
Thing to note! The entire tree re-renders on every context update. Even unrelated components, anywhere inside the Provider.
great video, i just subbed.
Awesome glad you found it helpful 💪🤓
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
Good content 👍
Thank you! Appreciate your feedback🤓
how about async when dispatch sir?
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??
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 TH-cam 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
hey bro how are you using styles
Css modules.
just 50 mins, I know 70% of Reactjs
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.
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 TH-cam! 🇿🇦
🇿🇦✌
I can't belive someone use redux instead of vue 3.
i hate how every example online is such simple examples
Mujhe laga tha react asaan hai 😂
Why is every example a fucking todo list? I need different examples to fucking learn.