KZhead
Ғылым және технология

All you need to know about the Context API | React Context API Crash Course

PedroTech
2024 ж. 17 Мам.
78 805 Рет қаралды
Жүктеу

In this video I will go over the built in State Management solution for react. Context API is a very interesting api but it is constantly misused, so I wanted to go over my thoughts on it.
Code: github.com/machadop1407/conte...
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Business Email: pedro@pedrotech.co
Timestamps:
00:00 | Intro
01:11 | Why use the ContextAPI?
05:48 | Creating a context
07:00 | Creating a context provider
10:32 | Best Practices - Creating context provider components
13:25 | Drawback of ContextAPI
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#reactjs #contextapi

Пікірлер

  • Informational, straight to point, friendly, and motivational. I really like how you give us your honest opinion near the end based on your experience. It helps us learners because we are overwhelmed by so many things to learn from. Now I am going to watch your hooks video. Thank you again.

    @tadakuniyasuda8214@tadakuniyasuda8214 Жыл бұрын

  • Great video. I like how you didn't just explain how to implement context, but also revealed the drawbacks and mentioned where to use it.

    @mostafa2199@mostafa2199 Жыл бұрын

  • I really appreciate how balanced and informative this is . Great delivery and excellent content.

    @byronk5@byronk5 Жыл бұрын

  • im really struggling to stop avoid unnecessary rerenders when using context api, you gave me the idea on how should i fixed it, thanks man

    @ramosjeromedelrosario6103@ramosjeromedelrosario6103 Жыл бұрын

  • Thank you for taking the time to give drawbacks and opinions and your preferred method. It really made it easy to wrap around broad concepts.

    @ChitruShrestha@ChitruShrestha Жыл бұрын

  • Good stuff here. I appreciate how the downside of context management is underscored. One really needs to think about state, but also the way the state changes.

    @jaimemedina3351@jaimemedina3351 Жыл бұрын

  • Thank you Pedro for this one. It came at the right time for me.

    @frankiefab@frankiefab Жыл бұрын

  • way more understanding than your previous context api video🙌🏾

    @raz2687@raz26877 ай бұрын

  • perfect- i just wanted to look into the context API :) u helped me with redux so im looking forward to context api

    @matt112fly@matt112fly Жыл бұрын

  • Really informative content. I love your suggestions where and when.

    @hassamulhaq7762@hassamulhaq7762 Жыл бұрын

  • I loved the way you explained.

    @mdabidkalam3527@mdabidkalam35279 ай бұрын

  • Very Helpful. Thanks

    @sriramr1981@sriramr19818 ай бұрын

  • Your knowledge was always incredible. Now your video graphics and etc. are also evolving... Great effort

    @lasindunuwanga5292@lasindunuwanga5292 Жыл бұрын

    • Appreciate it! Happy to see u are liking the videos :)

      @PedroTechnologies@PedroTechnologies Жыл бұрын

  • Good timing, I needed this.

    @BoredBricks@BoredBricks Жыл бұрын

  • Love your video man, thanks so much for the info!

    @berndeveloper@berndeveloper Жыл бұрын

  • This video is a lifesaver, thanks a bunch!

    @Aziz-kw6ct@Aziz-kw6ct26 күн бұрын

  • i have the same feeling about redux and graphQL xd amazing video, subscribed ! great job

    @elwoseopenstepcrew1134@elwoseopenstepcrew1134 Жыл бұрын

  • THANKS! Was very informative and helpfull

    @misscarla_alhambra7345@misscarla_alhambra7345Ай бұрын

  • Thanks pedro .. really need this tutorial hope you make next.js typescript tutorial

    @austinbriencabanada8229@austinbriencabanada8229 Жыл бұрын

  • Thanks for the video, helped me understand the context API

    @ytpeerz@ytpeerz Жыл бұрын

  • Voce eh incrivel!!! Adoro seus videos :D

    @geicianecosta3925@geicianecosta3925 Жыл бұрын

  • Love the content!

    @soumadip_skyy_banerjee@soumadip_skyy_banerjee Жыл бұрын

  • Bruh, you're a life saver

    @heitormbonfim@heitormbonfim Жыл бұрын

  • Thank you for teaching me this stuff...

    @nikolozmacharashvili1212@nikolozmacharashvili1212 Жыл бұрын

  • yo pedro, I create ContextProvider for socket io and use it for layout in react-router-dom element and use Outlet as a children inside that ContextProvider is that okay? previously I use builtin useOutletContext hooks provided by r-r-d but I have nested protected route so its throw and error.

    @willyhorizont8672@willyhorizont8672 Жыл бұрын

  • Thanks for this!

    @nro337@nro337 Жыл бұрын

  • Hi Pedro. Really nice, as always. I really liked your video on "4 types of Fetch" because you divided that into different files like it would be in production. Here at 8:20 you're saying "And obviously I'm doing it in one file. But imagine how it would look if you separate that to more files". Please: these people (myself partly included) which are watchich these beginner videos have almost certainly a problem to see how it would work with imports and so on in those separate files. So my tip for next time, show it in one file, no problem, but then, for 5 seconds (at the end for example) show it separated to more files with good file names and file structure. Nearly all internet tutorials, for "simplicity" are showing everything in one file.... Be different! Be closer to production! Like you were in "4 types of Fetch video" :-)

    @songokussj4cz@songokussj4cz Жыл бұрын

    • Totally agree on this!!

      @sravyanandina@sravyanandina Жыл бұрын

    • Nonsense. The one file approach did a great job in showing the prop drilling tendency in React. Make your own videos before handing out 'tips'.

      @jaimemedina3351@jaimemedina3351 Жыл бұрын

    • @@jaimemedina3351 😂Nothing wrong with suggestions. I am sure the creator appreciates the suggestion.

      @chippandenga6722@chippandenga6722 Жыл бұрын

  • Great stuff as always. I pretty much use Zustand for everything these days.

    @GabrielMartinez-ez9ue@GabrielMartinez-ez9ue Жыл бұрын

    • Is Zustand any good

      @CraigClayton-bk3ze@CraigClayton-bk3ze Жыл бұрын

    • @@CraigClayton-bk3ze i like it a lot. It’s simple and no boilerplate as rtk

      @GabrielMartinez-ez9ue@GabrielMartinez-ez9ue Жыл бұрын

  • Hey Pedro! Thanks for the video. What VSCode theme are you using? I love it!

    @autumndavis2638@autumndavis2638 Жыл бұрын

    • dracula

      @mezbahuddinrafi9081@mezbahuddinrafi9081 Жыл бұрын

  • A quick question: the re rendering is really a drawback the re rendering is a misunderstood feature of context? I mean, the name itself says, context. Is a thing to wrap components inside to warn these components, like: "hey, the state you want to show changed, so let's re render".

    @fabionunes2793@fabionunes2793 Жыл бұрын

  • You rock ! Thank so much

    @francoischevalier9608@francoischevalier9608 Жыл бұрын

  • This was helful!

    @kevinemugisha9035@kevinemugisha90356 ай бұрын

  • Can you also make a video on best practices on react app file structure. and styling please

    @saqibghouse5440@saqibghouse5440 Жыл бұрын

  • Olá Pedro! Vc tem conteúdos com typescript?

    @enriquesantosdeoliveira5798@enriquesantosdeoliveira5798 Жыл бұрын

  • Thanks bro

    @muhammedozalp@muhammedozalp8 ай бұрын

  • Great video 👊

    @alexdefaro@alexdefaro Жыл бұрын

  • great video. thanks man

    @cryptomallu6271@cryptomallu6271 Жыл бұрын

  • Excellent video.

    @ravisankar9122@ravisankar91224 ай бұрын

  • Thanks Pedro

    @devwithbrian1534@devwithbrian15342 күн бұрын

  • very well explained

    @AhmedKhan-rt6oz@AhmedKhan-rt6oz Жыл бұрын

  • Could you please talk about RxJs or reactive state managment?

    @AminSani@AminSani Жыл бұрын

  • thanks. it helped alot

    @mohammadmahdialvansaz8001@mohammadmahdialvansaz8001 Жыл бұрын

  • Thank you :)

    @pemadechen9199@pemadechen9199 Жыл бұрын

  • Great Content

    @friendshipwithjavascript@friendshipwithjavascript Жыл бұрын

  • ty bruu

    @anaselhassani2545@anaselhassani2545 Жыл бұрын

  • thanks a lot 🙏🙏

    @AM-nm6ts@AM-nm6ts Жыл бұрын

  • Amazing video

    @ThColinPereira@ThColinPereira Жыл бұрын

  • Do you have any video on react native?

    @chigbojames2803@chigbojames2803 Жыл бұрын

  • Thanks bro it heled me a lot. thanks a lot bro my sweet bro

    @discoverthecode2286@discoverthecode2286 Жыл бұрын

  • excelente video

    @fraternidadeaustriaca2625@fraternidadeaustriaca2625 Жыл бұрын

  • Im just getting back to react. Why not use redux for this kind of problems?

    @aeiou...@aeiou...10 ай бұрын

  • When to use redux toolkit and when to use context api?

    @AsifKhan-ee8ez@AsifKhan-ee8ez Жыл бұрын

  • let me watch this one, i always learn a lot on this platform

    @kabagambedaniel2468@kabagambedaniel2468 Жыл бұрын

  • Hello bro please make complete FIREBASE REACT VIDEO INCLUDING ALL

    @nabinsaud4688@nabinsaud4688 Жыл бұрын

  • If you try to pass a null value into a createContext while you are using Typescript it will throw a warning. Yeah, you can change your tsconfig to ignore this (ignore null checks). There is a workaround, can't remember it at the moment -- but I figure I share this for the TS guys who might be watching this video while working LOL.

    @quelchx@quelchx Жыл бұрын

    • Yes! I use typescript at my job and on side projects, what I do is I create an object called `defaultValues` and also specify the format of the context with an interface

      @PedroTechnologies@PedroTechnologies Жыл бұрын

    • @@PedroTechnologies Sounds about right. I have worked on some code bases were I think we did something like that with an initial state or like this (been a while) const authContext = useContext({} as AuthContextType) the context type being an ts interface or however we did it I forgets and am too lazy to go back and look =)

      @quelchx@quelchx Жыл бұрын

  • Thanks

    @bahibrahim101@bahibrahim101 Жыл бұрын

  • Thanks!

    @yasensim@yasensim Жыл бұрын

    • Thank you for the support!!!

      @PedroTechnologies@PedroTechnologies Жыл бұрын

  • Thats why i really like the vue team . They created pinia, and it has the solutions embeded in one solutions.

    @YabombomTelevision@YabombomTelevision11 ай бұрын

    • Yeah. Hope pinia isn't tied to vue though

      @aeiou...@aeiou...10 ай бұрын

  • Could you do typescript in react ?

    @jordantanaliga100@jordantanaliga100 Жыл бұрын

  • you are the next web dev simplified i swear

    @skl949@skl949 Жыл бұрын

  • You know you are just explaining to yourself, and do not mind that the viewer does not have the ideas of what you are saying so you should show what you are saying. Remember the point is you are here in order to be understood.

    @papa_ethan@papa_ethan18 күн бұрын

  • Could you make Relay tutorial please

    @slahomar1497@slahomar1497 Жыл бұрын

  • if I use several providers. where I should put them please. like this? thanks a lot

    @AM-nm6ts@AM-nm6ts Жыл бұрын

    • You can put them where ever you want! You could do it like this if you want to access all the data from each provider everywhere in the app. But you can also put providers inside of the app so that the data is only accessible inside of a group of components

      @PedroTechnologies@PedroTechnologies Жыл бұрын

    • @@PedroTechnologies thank you so much :) god bless you 🙏🙏

      @AM-nm6ts@AM-nm6ts Жыл бұрын

  • How do you install it?

    @albertoginelsalvador2172@albertoginelsalvador2172 Жыл бұрын

  • ❤️❤️❤️

    @augischadiegils.5109@augischadiegils.5109 Жыл бұрын

  • nice video

    @krateskim4169@krateskim416911 ай бұрын

  • So I planned to watch the video on the series of your react tutorials but this on is more longer so im going to start with these. I wanted to give you a gift but dont know how to contact you

    @oncoding4520@oncoding4520 Жыл бұрын

    • watched and finished almost the hole series

      @oncoding4520@oncoding4520 Жыл бұрын

    • You can send some money to him

      @AmitSharma-nr1wi@AmitSharma-nr1wi3 ай бұрын

  • We need tutorial on REDUX with react

    @akaabdullah@akaabdullah Жыл бұрын

  • well i understand what you tried to tell so now please make a tutorial on REDUX

    @akaabdullah@akaabdullah Жыл бұрын

    • He already has a tutorial on redux... well detailed

      @Savics_dev@Savics_dev Жыл бұрын

  • Could you add the starting code also, so that we can follow along from the beginning?

    @1989SeanSmith@1989SeanSmith11 ай бұрын

    • i am terribly confused why he call child compoenet if he can directly call grandchild

      @theintrovert894@theintrovert89411 ай бұрын

  • the changes made to this context object does'nt re-render the child components , you're passing the setUsername as a reference to the value prop, the reason why it is re-rendering is , you're making changes to the state by passing its setUsername reference and offcourse if a state in parent component changes the child component is re-rendered. Context API changes doesnt re-render it's child components.

    @chethananderson3446@chethananderson3446 Жыл бұрын

  • Wrapping multiple components with context will turn into a big mess the bigger the app gets. It’s good to know, but I would never use it, there are just too many better options.

    @filipevalentegomes2383@filipevalentegomes2383 Жыл бұрын

    • I agree! Thats why i try to use React query + composition in most cases. And use the context api for general states that are rarely mutated.

      @PedroTechnologies@PedroTechnologies Жыл бұрын

  • React native !!!!!!!!!!!!!!!!!!

    @nomapos@nomapos Жыл бұрын

  • what are children and why are they passed as props

    @anjalichauhan6347@anjalichauhan6347 Жыл бұрын

  • Badly explained

    @tarek_maza@tarek_maza Жыл бұрын

  • Download SUBSGAIN App from play store

    @RohitKumar-ht4sr@RohitKumar-ht4sr Жыл бұрын

  • Thank you, Pedro! The way you explain makes everything super easy! Go Brazil 🟢🟡🔵

    @grazielak.pauselius4225@grazielak.pauselius4225 Жыл бұрын
KZhead