5 ms·

So I see where you're coming from. To first address Redux, etc, React has no opinion on state storage, it's a feature not a bug. Obviously you need to store sta

So I see where you're coming from. To first address Redux, etc, React has no opinion on state storage, it's a feature not a bug. Obviously you need to store state somewhere, and Redux, Relay, etc are just tools to address that concern. But that's really unrelated to what you're trying to address, which is coupling between leaves that have shallow common ancestors, but are themselves quite deep. Although in my experience a good website does group related pieces of information, and so well organized state often maps easily to a well organized UI, functional programming gives us the tools to avoid deeply nested expressions regardless of your application (or even your framework). One thing to realize is that you always get to decide on the granularity of your compositions. It is not necessary to build a deep hierarchy if you design the granularity of your interfaces correctly. Another great tool is higher order functional programming, such as passing components to components (via children). In this way, it is easy to describe generic interfaces and supply specific pieces of data without having the intermediary interfaces know or care about that data. Another approach, akin to using something like the state monad, is to use Reacts context feature, but this is rarely needed, in my experience. Personally I make heavy use of higher order components, and I find I rarely exceed a component tree height of three.

porker 8y ago
Is there a blog post explaining higher order components in more detail, preferably with examples?
- kalkut 8y ago
  The doc is very detailed with good examples : https://reactjs.org/docs/higher-order-components.html https://reactjs.org/docs/higher-order-components.html
- akie 8y ago
  Higher Order Components are like Aspect Oriented Programming - it takes a component and adds some stuff to it. It can add that stuff to any kind of component. That's all you really need to know. Examples of HOC are the connect() call from Redux, or the withNavigation() from React Navigation, or injectIntl() from React-Intl. These respectively add Redux functionality, navigation functionality, and internationalization functionality to your component. I think the name "Higher Order Component", like many things in the React world, is poorly chosen and actually obscures what it is, how it works, and makes it look more intimidating than it really is. It's technically correct (like 'reducer' is), but communicates nothing.
  - davedx 8y ago
    I agree. It's effectively a replacement for the old React mixin system. It happens to use functional programming methods, but that's an implementation detail.
- acemarke 8y ago
  Yep, lots! See the "React Component Composition" section of my React/Redux links list: https://github.com/markerikson/react-redux-links/blob/master/react-component-composition.md https://github.com/markerikson/react-redux-links/blob/master...
kalkut 8y ago
As someone one who rewrote a React/Redux project with bare React : Everything in your post is true, I made the same observations and I reached the same conclusions. Right now with a few devs it is going very well but I do worry about on-boarding people who are not proficient in functional programming. React code without a global state management library is very pleasant and easy to read/understand for many, but for some it is not always obvious to write. You may have to spend more time code reviewing and training newcomers who will sometimes feel like their task is impossible without Redux. I have yet to see if those requirements can still hold for a big team but I think it is possible. My current opinion on Redux is that it is best suited for existing project migrating to React because you may inherit very odd relationships between the view and the data and Redux will avoid you a lot of pain on this regard. A new project should avoid Redux & co as long as it can.
ipntu 8y ago
> Personally I make heavy use of higher order components, and I find I rarely exceed a component tree height of three. That's my experience as well. If you use a deep component hierarchy you have bigger problems than those solved by Redux, VueX or the Context API. Higher order components or even simple functional components are really underrated when it comes to making your application simpler to reason about and to maintain.

porker 8y ago

Is there a blog post explaining higher order components in more detail, preferably with examples?

kalkut 8y ago
The doc is very detailed with good examples : https://reactjs.org/docs/higher-order-components.html https://reactjs.org/docs/higher-order-components.html
akie 8y ago
Higher Order Components are like Aspect Oriented Programming - it takes a component and adds some stuff to it. It can add that stuff to any kind of component. That's all you really need to know. Examples of HOC are the connect() call from Redux, or the withNavigation() from React Navigation, or injectIntl() from React-Intl. These respectively add Redux functionality, navigation functionality, and internationalization functionality to your component. I think the name "Higher Order Component", like many things in the React world, is poorly chosen and actually obscures what it is, how it works, and makes it look more intimidating than it really is. It's technically correct (like 'reducer' is), but communicates nothing.
- davedx 8y ago
  I agree. It's effectively a replacement for the old React mixin system. It happens to use functional programming methods, but that's an implementation detail.
acemarke 8y ago
Yep, lots! See the "React Component Composition" section of my React/Redux links list: https://github.com/markerikson/react-redux-links/blob/master/react-component-composition.md https://github.com/markerikson/react-redux-links/blob/master...

kalkut 8y ago

As someone one who rewrote a React/Redux project with bare React : Everything in your post is true, I made the same observations and I reached the same conclusions. Right now with a few devs it is going very well but I do worry about on-boarding people who are not proficient in functional programming. React code without a global state management library is very pleasant and easy to read/understand for many, but for some it is not always obvious to write. You may have to spend more time code reviewing and training newcomers who will sometimes feel like their task is impossible without Redux. I have yet to see if those requirements can still hold for a big team but I think it is possible. My current opinion on Redux is that it is best suited for existing project migrating to React because you may inherit very odd relationships between the view and the data and Redux will avoid you a lot of pain on this regard. A new project should avoid Redux & co as long as it can.

ipntu 8y ago

> Personally I make heavy use of higher order components, and I find I rarely exceed a component tree height of three. That's my experience as well. If you use a deep component hierarchy you have bigger problems than those solved by Redux, VueX or the Context API. Higher order components or even simple functional components are really underrated when it comes to making your application simpler to reason about and to maintain.