DEV Community

Discussion on: Adios Redux: using React hooks and Context effectively

View post
Collapse
 
mariorozic profile image
Mario Rozic •

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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!!

Collapse
 
ankitjey profile image
Ankit Jena •

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.

Collapse
 
melitus profile image
Aroh Sunday •

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