I love coding and what motivates me is problem-solving and preferably if it has an element of creativity.
I am a self-taught developer and work full-time as a front-end developer.
Location
Denmark 🇩🇰
Education
Bachelor in Nutrition and health (I know not super relevant to my current line of work!)
I am trying to wrap my head around this idea and understand if/why this is a great idea. I follow you as far as using a hook for the fetch logic. I always prefer moving the logic for something like this into a custom hook. However, what is the added benefit of using context when you can access the service from the hook? To cache data??? 🤔
The way I see it, the benefit comes when you're testing. When you need to test a component that relies on the service, you include a context provider when you render for the test. You can then set the value for that provider to be a mock implementation of that service.
I love coding and what motivates me is problem-solving and preferably if it has an element of creativity.
I am a self-taught developer and work full-time as a front-end developer.
Location
Denmark 🇩🇰
Education
Bachelor in Nutrition and health (I know not super relevant to my current line of work!)
I know Jest comes with a set of functions to be able to mock components, and I'm not veery used to using them. I find this particular solution makes it easier to mock components on the fly, while also enabling abstracting away concerns. It's entirely possible that there are more elegant built-in ways that I just haven't explored yet :)
I love coding and what motivates me is problem-solving and preferably if it has an element of creativity.
I am a self-taught developer and work full-time as a front-end developer.
Location
Denmark 🇩🇰
Education
Bachelor in Nutrition and health (I know not super relevant to my current line of work!)
Well, I do not see your solution as a bad implementation at all, I just feel you sometimes tend to get a bit of "context-provider-hell" working with things like styled components and Apollo-client etc. I just wich this could be done in a cleaner way in React.
I love coding and what motivates me is problem-solving and preferably if it has an element of creativity.
I am a self-taught developer and work full-time as a front-end developer.
Location
Denmark 🇩🇰
Education
Bachelor in Nutrition and health (I know not super relevant to my current line of work!)
LoL 😂 Styled components is a bit of a love/hate relationship I guess. But it can be really powerful when you want to do things with styling that are a bit out of the ordinary. I used it yestoday to create a cool "unwrap" effect animating some nested nav-menus where I the height of elements that would change depending on what is placed in the menu: Stuff you just can't do with "traditional" ways of styling. I bookmarked Jacks Solution - looks like something that might come in handy!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I am trying to wrap my head around this idea and understand if/why this is a great idea. I follow you as far as using a hook for the fetch logic. I always prefer moving the logic for something like this into a custom hook. However, what is the added benefit of using context when you can access the service from the hook? To cache data??? 🤔
Thank you for the comment! :)
The way I see it, the benefit comes when you're testing. When you need to test a component that relies on the service, you include a context provider when you render for the test. You can then set the value for that provider to be a mock implementation of that service.
Does that make sense?
Ahh, yeah! That makes sense! I still have a lot to learn when it comes to testing, so I really wasn't thinking about that.
Glad that clears it up! :)
I know Jest comes with a set of functions to be able to mock components, and I'm not veery used to using them. I find this particular solution makes it easier to mock components on the fly, while also enabling abstracting away concerns. It's entirely possible that there are more elegant built-in ways that I just haven't explored yet :)
If you think it might be useful, I can see about making a tutorial for how to think when writing tests in this manner!
Well, I do not see your solution as a bad implementation at all, I just feel you sometimes tend to get a bit of "context-provider-hell" working with things like styled components and Apollo-client etc. I just wich this could be done in a cleaner way in React.
I'll admit that I just very shortly touched into StyledComponents... I did not like it at all :P.
Jack seems to have built a possibly viable solution for a full-fledged DI-system. It's probably more refined than mine!
LoL 😂 Styled components is a bit of a love/hate relationship I guess. But it can be really powerful when you want to do things with styling that are a bit out of the ordinary. I used it yestoday to create a cool "unwrap" effect animating some nested nav-menus where I the height of elements that would change depending on what is placed in the menu: Stuff you just can't do with "traditional" ways of styling. I bookmarked Jacks Solution - looks like something that might come in handy!