tag:blogger.com,1999:blog-4455058894110083658.post7150824910501262606..comments2024-02-26T22:59:25.161+00:00Comments on Vardhaman Deshpande: SPFx: Using React hooks to globally share service scope between componentsVardhaman Deshpandehttp://www.blogger.com/profile/17919845281919756108noreply@blogger.comBlogger5125tag:blogger.com,1999:blog-4455058894110083658.post-79665792711559012122020-02-08T19:37:48.952+00:002020-02-08T19:37:48.952+00:00I think the main benefit you get with HOC is that ...I think the main benefit you get with HOC is that you are able to specify which properties from the context get passed into the child component (e.g. the service scope in this case). With doing using 'static contextType = AppContext' you are passing the entire context again. I think both options are valid depending on the use case. Vardhaman Deshpandehttps://www.blogger.com/profile/17919845281919756108noreply@blogger.comtag:blogger.com,1999:blog-4455058894110083658.post-81171890303859336542020-02-08T18:16:37.239+00:002020-02-08T18:16:37.239+00:00I am not a fan of extra wrapping either, and techn...I am not a fan of extra wrapping either, and technically the HOC is wrapping the child component as well. <br />With React Context for classes you have two different options:<br />- Wrapping your child component with the AppContext.Consumer component that uses render props.<br />- Use the mentioned Class.contextType (static contextType = AppContext). In this case, the context is available in this.context and no wrapping is needed.Rafael Garciahttps://www.blogger.com/profile/17208768066000186984noreply@blogger.comtag:blogger.com,1999:blog-4455058894110083658.post-41688070212248830882020-02-08T15:15:35.764+00:002020-02-08T15:15:35.764+00:00Hi Rafa, I am good thanks, Hope you are doing grea...Hi Rafa, I am good thanks, Hope you are doing great as well!<br /><br />Yo are right, in simple scenarios you could get away with just doing static contextType = AppContext but as mentioned in the article you posted, it could get tricky if the child component was dependent on multiple contexts. In that scenario, you would have to resort to something like this: https://reactjs.org/docs/context.html#consuming-multiple-contexts <br /><br />(An argument can definitely be made that why not combine both contexts in a single context but that would make component re-use slightly more complex)<br /><br />Also, I am not a big fan of wrapping the child component in a tag every-time. Using HOC with hooks or even using only hooks makes the code simpler in my opinion. Vardhaman Deshpandehttps://www.blogger.com/profile/17919845281919756108noreply@blogger.comtag:blogger.com,1999:blog-4455058894110083658.post-2170971503152138002020-02-08T13:30:28.320+00:002020-02-08T13:30:28.320+00:00Hi Vard, I hope you are doing well.
Maybe I am los...Hi Vard, I hope you are doing well.<br />Maybe I am losing something but I don't see the need of React hooks or HOC to achieve the same result.<br />React Context existed much before hooks (https://reactjs.org/docs/context.html), and you can use that API both in the Provider (as you are doing) as in the Consumer. In the child component you just need to import AppContext.ts and use static contextType = AppContext;Rafael Garciahttps://www.blogger.com/profile/17208768066000186984noreply@blogger.comtag:blogger.com,1999:blog-4455058894110083658.post-71943355443578716332020-02-05T11:57:47.810+00:002020-02-05T11:57:47.810+00:00Fantastic article Fantastic article Usama Wahab Khanhttps://www.blogger.com/profile/14900405000385256620noreply@blogger.com