No video

React State Management using Context API (useContext + useReducer Hooks = Magic 💥)

  Рет қаралды 42,954

The Full Stack Junkie

The Full Stack Junkie

Күн бұрын

Пікірлер: 108
@the_full_stack_junkie
@the_full_stack_junkie 4 жыл бұрын
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!
@jamesbest2221
@jamesbest2221 3 жыл бұрын
I’ve watched about 15 videos on this topic, and yours is by far the clearest and best! Good job, sub’d!
@CEFPRAVEENS
@CEFPRAVEENS 3 жыл бұрын
Yeah he gave perfect way to use context api with reducer
@raymondmichael4987
@raymondmichael4987 2 жыл бұрын
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_junkie
@the_full_stack_junkie 2 жыл бұрын
🙏
@krishnarajagopal1964
@krishnarajagopal1964 7 ай бұрын
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
@rachit2982 Жыл бұрын
Great explanation. Totally worth watching 👌
@itishermann
@itishermann 3 жыл бұрын
You're far better than the university professors here. Thanks so much. Sub'd
@the_full_stack_junkie
@the_full_stack_junkie 3 жыл бұрын
Wow appreciate the positive comment thanks
@SatyamSharma-wi8qn
@SatyamSharma-wi8qn 3 жыл бұрын
By far the only videos that explains something on this topic
@harisankar2010
@harisankar2010 2 жыл бұрын
master class .. keep up guiding enthusiasts
@khandoor7228
@khandoor7228 4 жыл бұрын
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_junkie
@the_full_stack_junkie 4 жыл бұрын
Thank you! Really Appreciate the comment 🤓
@gamerss6803
@gamerss6803 2 жыл бұрын
Yo this was very helpful !!
@devinoutfleet1998
@devinoutfleet1998 Жыл бұрын
Excited to be here!!
@rightjtv7641
@rightjtv7641 3 жыл бұрын
thank so much brother you save my life right now i understand well useReducer
@prawgspinkz8015
@prawgspinkz8015 3 жыл бұрын
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_junkie
@the_full_stack_junkie 3 жыл бұрын
Wow thanks this comment means allot thank you very much!😇
@serhiipyrozhenko2439
@serhiipyrozhenko2439 3 жыл бұрын
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_junkie
@the_full_stack_junkie 3 жыл бұрын
Great overall summary of why Context is great for beginners and even little more thanks for this positive comment💪🔥
@zakidev
@zakidev 2 жыл бұрын
OMG! You are born a teacher 😳
@the_full_stack_junkie
@the_full_stack_junkie 2 жыл бұрын
Thanks champ🙏
@anthonyphilpot6178
@anthonyphilpot6178 3 жыл бұрын
This is the BEST VIDEO that has helped me so far understanding this context and reducer hook! Thanks man, great teacher!
@sadikirungo
@sadikirungo 2 жыл бұрын
This truly is a work of art
@rafaelfu624
@rafaelfu624 2 жыл бұрын
Implementing this hooks on the most simple idea (fewer code) is really helpful to understand. Thanks!
@Lovedeep555
@Lovedeep555 2 жыл бұрын
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-hs4yu
@hamidkhan-hs4yu 3 жыл бұрын
I learned too much things clearly from this video, so a bundle of thanks to u sir...
@suyashtiwari8492
@suyashtiwari8492 2 жыл бұрын
Brilliant video sir, subscribed 🔥🔥
@bz6304
@bz6304 3 жыл бұрын
This is the best video on globalContext with useReducer! Thank you. Subscribed
@the_full_stack_junkie
@the_full_stack_junkie 3 жыл бұрын
Very glad you found it helpful, thanks for the comment
@chenlesmom789
@chenlesmom789 3 жыл бұрын
Magic indeed.
@faijaanmemon
@faijaanmemon 2 жыл бұрын
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_junkie
@the_full_stack_junkie 2 жыл бұрын
Very glad this video was able to help you understand the topic better. Thanks for comment
@muxammad2777
@muxammad2777 2 жыл бұрын
thank you liked, subscribed and commented . you are amazing 🤩 😍
@ashish_prajapati_tr
@ashish_prajapati_tr 2 жыл бұрын
amazing tutorial
@AverageCho
@AverageCho 3 жыл бұрын
You're great at explaining things in a simple, easy to understand way. Thanks a bunch for this amazing content!
@gokulpisharody3155
@gokulpisharody3155 3 жыл бұрын
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_junkie
@the_full_stack_junkie 3 жыл бұрын
Thank you so much for this comment I really do appreciate it 🙏🤓
@mdshafkatsamin8241
@mdshafkatsamin8241 3 жыл бұрын
you deserve more views on this video. Thank u !
@Shakeel714
@Shakeel714 3 жыл бұрын
You are a cool teacher. Keep up your valuable contribution to React learners. Thanks.
@rizky954
@rizky954 2 жыл бұрын
Thanks you so much for the tutorial mate, I learn a lot from you 👍
@josevelez6865
@josevelez6865 2 жыл бұрын
This was so helpful. Thank you!
@nehanalini1606
@nehanalini1606 2 жыл бұрын
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
@mukundtiwari7207
@mukundtiwari7207 3 жыл бұрын
We need more of your videos dude you are awesome ❤️❤️
@the_full_stack_junkie
@the_full_stack_junkie 3 жыл бұрын
Thanks so much big videos coming soon 💪🤓
@skyescrawford9774
@skyescrawford9774 3 жыл бұрын
I found this video is really helpful so I leave my comment here, thank you so much
@the_full_stack_junkie
@the_full_stack_junkie 3 жыл бұрын
Thanks for your comment💪🤓 glad it helped
@753Manoj
@753Manoj 2 жыл бұрын
Sir please upload more videos on react .... it was really full of relevant content
@ozzyfromspace
@ozzyfromspace 2 жыл бұрын
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
@mohamedyoussef8835
@mohamedyoussef8835 3 жыл бұрын
Excellent Tutorial ++++++++++++++
@vitezslavslavik6662
@vitezslavslavik6662 3 жыл бұрын
Excellent explanation of the topic, I felt lost but no more thanks to you.
@jordantanaliga100
@jordantanaliga100 2 жыл бұрын
This is a replacement for redux really !!! But i got to consider the new one => Redux/Toolkit. Found it interesting though.
@jaggyjut
@jaggyjut 3 жыл бұрын
Pure gold. Thank you
@the_full_stack_junkie
@the_full_stack_junkie 3 жыл бұрын
🙏✌
@TheBhumbak
@TheBhumbak 3 жыл бұрын
great tutorial, doing really useful work
@the_full_stack_junkie
@the_full_stack_junkie 3 жыл бұрын
Thanks champ
@remongrabu
@remongrabu 3 жыл бұрын
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_junkie
@the_full_stack_junkie 3 жыл бұрын
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🤓!!
@chideraachinike7619
@chideraachinike7619 3 жыл бұрын
You're awesome, man! Much love! ❤️
@the_full_stack_junkie
@the_full_stack_junkie 3 жыл бұрын
Thank tou appreciate that comment🤓👌
@letsdoeverythinginoneweek9398
@letsdoeverythinginoneweek9398 3 жыл бұрын
thanks for this amazing videoo
@RavnitSuri
@RavnitSuri 2 жыл бұрын
Thing to note! The entire tree re-renders on every context update. Even unrelated components, anywhere inside the Provider.
@shreyajoshi5148
@shreyajoshi5148 3 жыл бұрын
Subscribed!!!! Sir you are doing great!
@the_full_stack_junkie
@the_full_stack_junkie 3 жыл бұрын
Thank you 🤓👌
@kanishkjha7621
@kanishkjha7621 Жыл бұрын
Love from India
@abdulrakib9906
@abdulrakib9906 3 жыл бұрын
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?
@MASTERRAGE
@MASTERRAGE 3 жыл бұрын
Fuck dude after all the searching, i found something cleaaan ! thanks sir
@sogggy
@sogggy 4 жыл бұрын
great video, i just subbed.
@the_full_stack_junkie
@the_full_stack_junkie 4 жыл бұрын
Awesome glad you found it helpful 💪🤓
@innocentroot7517
@innocentroot7517 4 жыл бұрын
Good content 👍
@the_full_stack_junkie
@the_full_stack_junkie 4 жыл бұрын
Thank you! Appreciate your feedback🤓
@IamTiernO
@IamTiernO 3 жыл бұрын
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_junkie
@the_full_stack_junkie 3 жыл бұрын
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
@kendimce3309
@kendimce3309 3 жыл бұрын
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_junkie
@the_full_stack_junkie 3 жыл бұрын
Yes from what i know it still the same. Redux on the other hand is using dispatch. This is because of the redux hooks.
@MrKrzysztof13
@MrKrzysztof13 3 жыл бұрын
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
@marcoonlinetv7769
@marcoonlinetv7769 3 жыл бұрын
What you think, will this concept slowly replace redux ???
@the_full_stack_junkie
@the_full_stack_junkie 3 жыл бұрын
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
@tanishkagarwal9653
@tanishkagarwal9653 2 жыл бұрын
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??
@willyhorizont8672
@willyhorizont8672 2 жыл бұрын
how about async when dispatch sir?
@aryankumar87771
@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
@the_full_stack_junkie Жыл бұрын
How does your dependency array look for the useEffect?
@aryankumar87771
@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
@aryankumar87771 Жыл бұрын
@@the_full_stack_junkie Hey man do you have a solution for this
@digitaldevboss324
@digitaldevboss324 3 жыл бұрын
This seems basically the same as Redux. Is there really a big difference at this point?
@the_full_stack_junkie
@the_full_stack_junkie 3 жыл бұрын
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.
@digitaldevboss324
@digitaldevboss324 3 жыл бұрын
@@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
@the_full_stack_junkie 3 жыл бұрын
Would love to see this as well
@digitaldevboss324
@digitaldevboss324 3 жыл бұрын
@@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
@TheBhumbak
@TheBhumbak 3 жыл бұрын
hey bro how are you using styles
@the_full_stack_junkie
@the_full_stack_junkie 3 жыл бұрын
Css modules.
@lukramingo1496
@lukramingo1496 2 жыл бұрын
just 50 mins, I know 70% of Reactjs
@laponiec
@laponiec 3 жыл бұрын
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_junkie
@the_full_stack_junkie 3 жыл бұрын
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.
@red010182
@red010182 2 жыл бұрын
I can't belive someone use redux instead of vue 3.
@BobbyBundlez
@BobbyBundlez 2 жыл бұрын
i hate how every example online is such simple examples
@rmt0858
@rmt0858 2 жыл бұрын
Mujhe laga tha react asaan hai 😂
@lyledavids4513
@lyledavids4513 4 жыл бұрын
Are you South African?
@the_full_stack_junkie
@the_full_stack_junkie 4 жыл бұрын
Yes I am. Guessing my English accent makes that pretty obv haha
@ACTISAMAL
@ACTISAMAL 3 жыл бұрын
@@the_full_stack_junkie Mooi gedoen! Keep up the good work.
@the_full_stack_junkie
@the_full_stack_junkie 3 жыл бұрын
Dankie dankie 🤓👌
@Mr_BetaMax
@Mr_BetaMax 3 жыл бұрын
It's great to see more and more South Africans making solid content on KZfaq! 🇿🇦
@the_full_stack_junkie
@the_full_stack_junkie 3 жыл бұрын
🇿🇦✌
@ibealgoody8524
@ibealgoody8524 3 жыл бұрын
Why is every example a fucking todo list? I need different examples to fucking learn.
Context API in react | get the concept
29:00
Hitesh Choudhary
Рет қаралды 54 М.
Mastering React Context: Do you NEED a state manager?
37:26
Jack Herrington
Рет қаралды 98 М.
Чёрная ДЫРА 🕳️ | WICSUR #shorts
00:49
Бискас
Рет қаралды 6 МЛН
Matching Picture Challenge with Alfredo Larin's family! 👍
00:37
BigSchool
Рет қаралды 49 МЛН
Люблю детей 💕💕💕🥰 #aminkavitaminka #aminokka #miminka #дети
00:24
Аминка Витаминка
Рет қаралды 724 М.
Dad Makes Daughter Clean Up Spilled Chips #shorts
00:16
Fabiosa Stories
Рет қаралды 3,8 МЛН
React State Management using Redux (Build a shopping Cart🔥 )
1:09:58
The Full Stack Junkie
Рет қаралды 71 М.
React Hooks Crash Course (useMemo, useCallback and more).
31:49
developedbyed
Рет қаралды 84 М.
React: Context Api
18:35
Fernando Herrera
Рет қаралды 32 М.
React Hooks: useReducer
12:12
Sam Meech-Ward
Рет қаралды 4,9 М.
Learn React Hooks: useContext - Simply Explained!
15:46
Cosden Solutions
Рет қаралды 155 М.
React 18's New State Hook You've Never Heard About
22:11
Jack Herrington
Рет қаралды 87 М.
How to be a git expert
46:26
Floating Little Leaves of Code
Рет қаралды 156 М.
What State Management Library Should I Use with React?
9:27
Generics: The most intimidating TypeScript feature
18:19
Matt Pocock
Рет қаралды 172 М.
Чёрная ДЫРА 🕳️ | WICSUR #shorts
00:49
Бискас
Рет қаралды 6 МЛН