3 ms·
> Requires a lot of coordination code, duplication, and coupling of your entire component hierarchy to each other no? Only if we tunnel-vision to a narrow defi
by lhorie 7y ago
> Requires a lot of coordination code, duplication, and coupling of your entire component hierarchy to each other no?
Only if we tunnel-vision to a narrow definition of "idiomatic patterns in React". In Angular, for example, this is solved via a DI system. In React, you actually get much higher level of coupling because all orchestration-type things need to go through context providers (meaning a given component may only work if certain providers are installed at the top level of the React tree). In Angular, a coupling mismatch issue would throw an error saying X component requires Y dependency and the solution would be to simply inject what is missing. No need to go edit your layout file or whatever.
- PKop 7y agoDefinitely, if you want to say that another framework itself better solves all of the very real problems that need solving... makes perfect sense. The coupling I'm mainly referring to is within your own app hierarchy. Moving/adding components around within your app requires editing the long chain of component hierarchies and data dependencies. Yes injection works to solve, but isn't this similar to hooks (encapsulating reusable logic/data fetching)? Whether a top level Context provider (that will also throw an error if not provided) or injection.. is there much of a difference? And does this not seem less coupled than prop drilling through the entire component chain? In the context of a discussion about UX, loading states, spinners, concurrent rendering though, does Angular address this? I'm not that familiar with it..
- pault 7y agoNot being able to move your components without editing your component hierarchy is a code smell. Data should be bound at the level it is consumed. "Prop drilling" is an anti-pattern. Redux is the most common way to solve this problem but you can use anything built on top of the context API.