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!
@jamesbest22213 жыл бұрын
I’ve watched about 15 videos on this topic, and yours is by far the clearest and best! Good job, sub’d!
@CEFPRAVEENS3 жыл бұрын
Yeah he gave perfect way to use context api with reducer
@raymondmichael49872 жыл бұрын
This was the comment that got me curious about this video and eventually ended up watching several times. He did a real good work.
@the_full_stack_junkie2 жыл бұрын
🙏
@krishnarajagopal19647 ай бұрын
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.
@rachit2982 Жыл бұрын
Great explanation. Totally worth watching 👌
@itishermann3 жыл бұрын
You're far better than the university professors here. Thanks so much. Sub'd
@the_full_stack_junkie3 жыл бұрын
Wow appreciate the positive comment thanks
@SatyamSharma-wi8qn3 жыл бұрын
By far the only videos that explains something on this topic
@harisankar20102 жыл бұрын
master class .. keep up guiding enthusiasts
@khandoor72284 жыл бұрын
Dude I see that you are new - 3 weeks - but your content is really solid! I sub'd and will be following you!!
@the_full_stack_junkie4 жыл бұрын
Thank you! Really Appreciate the comment 🤓
@gamerss68032 жыл бұрын
Yo this was very helpful !!
@devinoutfleet1998 Жыл бұрын
Excited to be here!!
@rightjtv76413 жыл бұрын
thank so much brother you save my life right now i understand well useReducer
@prawgspinkz80153 жыл бұрын
Why would someone dislike this video though 🤦🏾🤦🏾.. This is well explained and very educative , i truly did learn something new from this
@the_full_stack_junkie3 жыл бұрын
Wow thanks this comment means allot thank you very much!😇
@serhiipyrozhenko24393 жыл бұрын
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.
@the_full_stack_junkie3 жыл бұрын
Great overall summary of why Context is great for beginners and even little more thanks for this positive comment💪🔥
@zakidev2 жыл бұрын
OMG! You are born a teacher 😳
@the_full_stack_junkie2 жыл бұрын
Thanks champ🙏
@anthonyphilpot61783 жыл бұрын
This is the BEST VIDEO that has helped me so far understanding this context and reducer hook! Thanks man, great teacher!
@sadikirungo2 жыл бұрын
This truly is a work of art
@rafaelfu6242 жыл бұрын
Implementing this hooks on the most simple idea (fewer code) is really helpful to understand. Thanks!
@Lovedeep5552 жыл бұрын
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.
@hamidkhan-hs4yu3 жыл бұрын
I learned too much things clearly from this video, so a bundle of thanks to u sir...
@suyashtiwari84922 жыл бұрын
Brilliant video sir, subscribed 🔥🔥
@bz63043 жыл бұрын
This is the best video on globalContext with useReducer! Thank you. Subscribed
@the_full_stack_junkie3 жыл бұрын
Very glad you found it helpful, thanks for the comment
@chenlesmom7893 жыл бұрын
Magic indeed.
@faijaanmemon2 жыл бұрын
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 ♥️
@the_full_stack_junkie2 жыл бұрын
Very glad this video was able to help you understand the topic better. Thanks for comment
@muxammad27772 жыл бұрын
thank you liked, subscribed and commented . you are amazing 🤩 😍
@ashish_prajapati_tr2 жыл бұрын
amazing tutorial
@AverageCho3 жыл бұрын
You're great at explaining things in a simple, easy to understand way. Thanks a bunch for this amazing content!
@gokulpisharody31553 жыл бұрын
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 .
@the_full_stack_junkie3 жыл бұрын
Thank you so much for this comment I really do appreciate it 🙏🤓
@mdshafkatsamin82413 жыл бұрын
you deserve more views on this video. Thank u !
@Shakeel7143 жыл бұрын
You are a cool teacher. Keep up your valuable contribution to React learners. Thanks.
@rizky9542 жыл бұрын
Thanks you so much for the tutorial mate, I learn a lot from you 👍
@josevelez68652 жыл бұрын
This was so helpful. Thank you!
@nehanalini16062 жыл бұрын
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
@mukundtiwari72073 жыл бұрын
We need more of your videos dude you are awesome ❤️❤️
@the_full_stack_junkie3 жыл бұрын
Thanks so much big videos coming soon 💪🤓
@skyescrawford97743 жыл бұрын
I found this video is really helpful so I leave my comment here, thank you so much
@the_full_stack_junkie3 жыл бұрын
Thanks for your comment💪🤓 glad it helped
@753Manoj2 жыл бұрын
Sir please upload more videos on react .... it was really full of relevant content
@ozzyfromspace2 жыл бұрын
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
@mohamedyoussef88353 жыл бұрын
Excellent Tutorial ++++++++++++++
@vitezslavslavik66623 жыл бұрын
Excellent explanation of the topic, I felt lost but no more thanks to you.
@jordantanaliga1002 жыл бұрын
This is a replacement for redux really !!! But i got to consider the new one => Redux/Toolkit. Found it interesting though.
@jaggyjut3 жыл бұрын
Pure gold. Thank you
@the_full_stack_junkie3 жыл бұрын
🙏✌
@TheBhumbak3 жыл бұрын
great tutorial, doing really useful work
@the_full_stack_junkie3 жыл бұрын
Thanks champ
@remongrabu3 жыл бұрын
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!
@the_full_stack_junkie3 жыл бұрын
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🤓!!
@chideraachinike76193 жыл бұрын
You're awesome, man! Much love! ❤️
@the_full_stack_junkie3 жыл бұрын
Thank tou appreciate that comment🤓👌
@letsdoeverythinginoneweek93983 жыл бұрын
thanks for this amazing videoo
@RavnitSuri2 жыл бұрын
Thing to note! The entire tree re-renders on every context update. Even unrelated components, anywhere inside the Provider.
@shreyajoshi51483 жыл бұрын
Subscribed!!!! Sir you are doing great!
@the_full_stack_junkie3 жыл бұрын
Thank you 🤓👌
@kanishkjha7621 Жыл бұрын
Love from India
@abdulrakib99063 жыл бұрын
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?
@MASTERRAGE3 жыл бұрын
Fuck dude after all the searching, i found something cleaaan ! thanks sir
@sogggy4 жыл бұрын
great video, i just subbed.
@the_full_stack_junkie4 жыл бұрын
Awesome glad you found it helpful 💪🤓
@innocentroot75174 жыл бұрын
Good content 👍
@the_full_stack_junkie4 жыл бұрын
Thank you! Appreciate your feedback🤓
@IamTiernO3 жыл бұрын
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?
@the_full_stack_junkie3 жыл бұрын
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
@kendimce33093 жыл бұрын
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
@the_full_stack_junkie3 жыл бұрын
Yes from what i know it still the same. Redux on the other hand is using dispatch. This is because of the redux hooks.
@MrKrzysztof133 жыл бұрын
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
@marcoonlinetv77693 жыл бұрын
What you think, will this concept slowly replace redux ???
@the_full_stack_junkie3 жыл бұрын
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
@tanishkagarwal96532 жыл бұрын
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??
@willyhorizont86722 жыл бұрын
how about async when dispatch sir?
@aryankumar87771 Жыл бұрын
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 Жыл бұрын
How does your dependency array look for the useEffect?
@aryankumar87771 Жыл бұрын
@@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 KZfaq 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.
@aryankumar87771 Жыл бұрын
@@the_full_stack_junkie Hey man do you have a solution for this
@digitaldevboss3243 жыл бұрын
This seems basically the same as Redux. Is there really a big difference at this point?
@the_full_stack_junkie3 жыл бұрын
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.
@digitaldevboss3243 жыл бұрын
@@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_junkie3 жыл бұрын
Would love to see this as well
@digitaldevboss3243 жыл бұрын
@@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
@TheBhumbak3 жыл бұрын
hey bro how are you using styles
@the_full_stack_junkie3 жыл бұрын
Css modules.
@lukramingo14962 жыл бұрын
just 50 mins, I know 70% of Reactjs
@laponiec3 жыл бұрын
I ike your tutorial, but hate the fact that each tutorial does ContextApi differently, it is really hard to spot the pattern.
@the_full_stack_junkie3 жыл бұрын
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.
@red0101822 жыл бұрын
I can't belive someone use redux instead of vue 3.
@BobbyBundlez2 жыл бұрын
i hate how every example online is such simple examples
@rmt08582 жыл бұрын
Mujhe laga tha react asaan hai 😂
@lyledavids45134 жыл бұрын
Are you South African?
@the_full_stack_junkie4 жыл бұрын
Yes I am. Guessing my English accent makes that pretty obv haha
@ACTISAMAL3 жыл бұрын
@@the_full_stack_junkie Mooi gedoen! Keep up the good work.
@the_full_stack_junkie3 жыл бұрын
Dankie dankie 🤓👌
@Mr_BetaMax3 жыл бұрын
It's great to see more and more South Africans making solid content on KZfaq! 🇿🇦
@the_full_stack_junkie3 жыл бұрын
🇿🇦✌
@ibealgoody85243 жыл бұрын
Why is every example a fucking todo list? I need different examples to fucking learn.