DEV Community

Adios Redux: using React hooks and Context effectively

Ankit Jena on April 26, 2020

It's 2020 and React is still the most popular frontend framework in the world. It's not just because it's relatively simpler. The fact that it ke...

Read full post

Mario Rozic • May 4 '20

So let's say I have 3 reducers (providers) and 2 UI components, I have to wrap every single component for 3 times (3 providers) if I want to use all stores in these components?

<Provider1>
    <Provider2>
        <Provider3>
             <Component 1 />
        </Provider3>
    </Provider2>
</Provider1>
<Provider1>
    <Provider2>
        <Provider3>
             <Component 2 />
        </Provider3>
    </Provider2>
</Provider1>

What happens if I wrap both components together? I mean is that the right way to do it? Are there any performance issues or something?

<Provider1>
    <Provider2>
        <Provider3>
             <Component 1 />
             <Component 2 />
        </Provider3>
    </Provider2>
</Provider1>

ROFL as I was writing this I actually figure out how great this is, I still wanna post this tho 😅😅, let's assume I only want to use providers 1 and 2 in comp1, I just have to move Component1 by 1 line up, there is no need to wrap it in provider3 if it won't use any features from it.

This provider actually acts like that connect function from redux right?

Great article BTW, I didn't really have time to test hooks until now, and I am glad I did now, and run into this post it was really helpful!!

Ankit Jena • Jul 26 '20

Hey Mario,
Sorry for the late reply. You don't have to wrap all the components separately. Also yes there's no need to wrap the 3rd component. The provider is similar to connect function, in Redux we generally combine the reducers.

Aroh Sunday • Apr 5 '21

Hey Ankit,

Thanks for your response to the above question by Mario. What is the best way to wrap the without incurring performance issues? Thanks

Ignacio San Martin • Apr 26 '20 • Edited

Thanks for the article, it's great. But FYI, the word 'ciao' is in Italian, and it means both 'hello' as well as 'goodbye'. On the other hand, the word 'chau', is in Spanish, and it means only 'goodbye', which would be more appropriate in this context :)

Ankit Jena • Apr 26 '20

Ah, thanks for the info mate. Today years old. Always thought ciao meant "Goodbye". Will update it.

Ignacio San Martin • Apr 27 '20

You were almost right, in Spanish it does. Chau = Adios = Goodbye. Chau more coloquial, adios slightly more formal...both used extensively.

Thank you for the great article. Cheers.

Ankit Jena • Apr 28 '20

Glad it helped. PS. For some reason "Chau" did not sound good in my head. So went with Adios :D

Swayam Samyak Debasis • Apr 26 '20

That was nice. Actually my question is I have tried to learn redux and found it tough as you have mentioned above. I was planning to give it one more shot. In your opinion should I completely ditch it or continue it and learn it on a fundamental level to at least have an idea.

Ankit Jena • Apr 26 '20

The useReducer hook is actually a simpler way to understand Redux. If you understand that then you should understand Redux as well. Learning the fundamentals will help because this pattern is used a lot. Here's a good piece you can read
code-cartoons.com/a-cartoon-intro-...

Swayam Samyak Debasis • Apr 26 '20

Thanks

J.D Nicholls • Jul 28 '20

I started a global state using hooks and I came to the same solution! haha thanks for sharing, the only missing step was React.useMemo, very interesting! ❤️