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

Поділитися
Вставка
  • Опубліковано 1 гру 2024

КОМЕНТАРІ • 95

  • @ramosjeromedelrosario6103
    @ramosjeromedelrosario6103 2 роки тому +8

    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

  • @ChitruShrestha
    @ChitruShrestha Рік тому +7

    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.

  • @mostafa2199
    @mostafa2199 Рік тому +2

    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.

  • @lasindunuwanga5292
    @lasindunuwanga5292 2 роки тому +8

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

    • @PedroTechnologies
      @PedroTechnologies  2 роки тому +2

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

  • @byronk5
    @byronk5 Рік тому +3

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

  • @tadakuniyasuda8214
    @tadakuniyasuda8214 2 роки тому +5

    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.

  • @songokussj4cz
    @songokussj4cz 2 роки тому +12

    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" :-)

    • @sravyanandina
      @sravyanandina 2 роки тому +1

      Totally agree on this!!

    • @jaimemedina3351
      @jaimemedina3351 2 роки тому

      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'.

    • @chippandenga6722
      @chippandenga6722 Рік тому +4

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

  • @jaimemedina3351
    @jaimemedina3351 2 роки тому

    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.

  • @quelchx
    @quelchx 2 роки тому +5

    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.

    • @PedroTechnologies
      @PedroTechnologies  2 роки тому +2

      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

    • @quelchx
      @quelchx 2 роки тому

      @@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 =)

  • @CodeWithClinton
    @CodeWithClinton 4 місяці тому

    Awesome video Pedro, thank you so much for the knowledge shared.

  • @heitormbonfim
    @heitormbonfim Рік тому +1

    Bruh, you're a life saver

  • @Aziz-kw6ct
    @Aziz-kw6ct 7 місяців тому

    This video is a lifesaver, thanks a bunch!

  • @frankiefab
    @frankiefab 2 роки тому +1

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

  • @elwoseopenstepcrew1134
    @elwoseopenstepcrew1134 2 роки тому

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

  • @matt112fly
    @matt112fly 2 роки тому

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

  • @fabionunes2793
    @fabionunes2793 2 роки тому +2

    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".

  • @berndeveloper
    @berndeveloper Рік тому

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

  • @BoredBricks
    @BoredBricks 2 роки тому

    Good timing, I needed this.

  • @misscarla_alhambra7345
    @misscarla_alhambra7345 8 місяців тому

    THANKS! Was very informative and helpfull

  • @skl949
    @skl949 2 роки тому +1

    you are the next web dev simplified i swear

  • @GabrielMartinez-ez9ue
    @GabrielMartinez-ez9ue 2 роки тому

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

  • @ytpeerz
    @ytpeerz Рік тому

    Thanks for the video, helped me understand the context API

  • @mdabidkalam3527
    @mdabidkalam3527 Рік тому

    I loved the way you explained.

  • @austinbriencabanada8229
    @austinbriencabanada8229 2 роки тому

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

  • @YabombomTelevision
    @YabombomTelevision Рік тому

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

    • @aeiou...
      @aeiou... Рік тому

      Yeah. Hope pinia isn't tied to vue though

  • @hassamulhaq7762
    @hassamulhaq7762 2 роки тому +1

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

  • @saqibghouse
    @saqibghouse 2 роки тому +2

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

  • @cryptomallu6271
    @cryptomallu6271 Рік тому

    great video. thanks man

  • @papa_ethan
    @papa_ethan 7 місяців тому

    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.

  • @sriramr1981
    @sriramr1981 Рік тому

    Very Helpful. Thanks

  • @soumadip_banerjee
    @soumadip_banerjee Рік тому +1

    Love the content!

  • @a_basic_sheep_1993
    @a_basic_sheep_1993 2 роки тому

    Thank you for teaching me this stuff...

  • @geicianecosta3925
    @geicianecosta3925 2 роки тому +1

    Voce eh incrivel!!! Adoro seus videos :D

  • @VijenderSingh-wr6fm
    @VijenderSingh-wr6fm 4 місяці тому

    great video and explanation

  • @ravisankar9122
    @ravisankar9122 10 місяців тому

    Excellent video.

  • @francoischevalier9608
    @francoischevalier9608 2 роки тому

    You rock ! Thank so much

  • @nabinsaud4688
    @nabinsaud4688 2 роки тому +2

    Hello bro please make complete FIREBASE REACT VIDEO INCLUDING ALL

  • @devwithbrian1534
    @devwithbrian1534 6 місяців тому

    Thanks Pedro

  • @yasensim
    @yasensim 2 роки тому +2

    Thanks!

  • @kabagambedaniel2468
    @kabagambedaniel2468 2 роки тому

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

  • @nro337
    @nro337 2 роки тому

    Thanks for this!

  • @chethananderson3446
    @chethananderson3446 2 роки тому

    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.

  • @kevinemugisha9035
    @kevinemugisha9035 Рік тому

    This was helful!

  • @AhmedKhan-rt6oz
    @AhmedKhan-rt6oz 2 роки тому

    very well explained

  • @alexdefaro
    @alexdefaro 2 роки тому

    Great video 👊

  • @mohammadmahdialvansaz8001
    @mohammadmahdialvansaz8001 2 роки тому

    thanks. it helped alot

  • @pemadechen9199
    @pemadechen9199 Рік тому

    Thank you :)

  • @enriquesantosdeoliveira5798
    @enriquesantosdeoliveira5798 2 роки тому +1

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

  • @filipevalentegomes2383
    @filipevalentegomes2383 2 роки тому +2

    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.

    • @PedroTechnologies
      @PedroTechnologies  2 роки тому +1

      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.

  • @albertoginelsalvador2172
    @albertoginelsalvador2172 Рік тому

    How do you install it?

  • @autumndavis2638
    @autumndavis2638 2 роки тому

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

  • @aeiou...
    @aeiou... Рік тому

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

  • @AsifKhan-ee8ez
    @AsifKhan-ee8ez 2 роки тому

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

  • @anaselhassani2545
    @anaselhassani2545 2 роки тому

    ty bruu

  • @akaabdullah
    @akaabdullah 2 роки тому +1

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

    • @Savics_dev
      @Savics_dev Рік тому

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

  • @AminSani
    @AminSani 2 роки тому

    Could you please talk about RxJs or reactive state managment?

  • @chigbojames2803
    @chigbojames2803 2 роки тому

    Do you have any video on react native?

  • @willyhorizont8672
    @willyhorizont8672 2 роки тому

    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.

  • @1989SeanSmith
    @1989SeanSmith Рік тому

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

    • @theintrovert894
      @theintrovert894 Рік тому

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

  • @AM-nm6ts
    @AM-nm6ts 2 роки тому +1

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

    • @PedroTechnologies
      @PedroTechnologies  2 роки тому +1

      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

    • @AM-nm6ts
      @AM-nm6ts 2 роки тому

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

  • @discoverthecode2286
    @discoverthecode2286 2 роки тому

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

  • @AM-nm6ts
    @AM-nm6ts 2 роки тому

    thanks a lot 🙏🙏

  • @muhammedozalp
    @muhammedozalp Рік тому

    Thanks bro

  • @friendshipwithjavascript
    @friendshipwithjavascript 2 роки тому

    Great Content

  • @akaabdullah
    @akaabdullah 2 роки тому

    We need tutorial on REDUX with react

  • @slahomar1497
    @slahomar1497 2 роки тому

    Could you make Relay tutorial please

  • @bahibrahim101
    @bahibrahim101 2 роки тому

    Thanks

  • @fraternidadeaustriaca2625
    @fraternidadeaustriaca2625 Рік тому

    excelente video

  • @nomapos
    @nomapos 2 роки тому +1

    React native !!!!!!!!!!!!!!!!!!

  • @oncoding4520
    @oncoding4520 Рік тому

    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

  • @krateskim4169
    @krateskim4169 Рік тому

    nice video

  • @augischadiegils.5109
    @augischadiegils.5109 2 роки тому

    ❤️❤️❤️

  • @anjalichauhan6347
    @anjalichauhan6347 2 роки тому

    what are children and why are they passed as props

  • @tarek_maza
    @tarek_maza 2 роки тому

    Badly explained

  • @grazielak.pauselius4225
    @grazielak.pauselius4225 2 роки тому

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

  • @RohitKumar-ht4sr
    @RohitKumar-ht4sr 2 роки тому

    Download SUBSGAIN App from play store

  • @ThColinPereira
    @ThColinPereira 2 роки тому

    Amazing video