Consider a typical web dev situation: React, Redux, Material-UI, a new JSS-decorated component that’s going to be connected with Redux. We create a new file, write the component code in it, then export it like that:
export default withStyles(styles)(connect(mapStateToProps)(MyComponent));
This simple line contains at least 5 functions in it. Let’s tear this down right-to-left:
MyComponentmay possibly be a functional component (a function that accepts a single
propsargument and returns a React element), so it might count as a function.
mapStateToPropsis a function that returns the mapping of the decorated component properties to Redux store state.
- …a decorator function that returns a wrapper component
And we’re only done with the first part of this abomination! Now let’s proceed to the outer block:
styleshas to be a function when you need access to theme properties.
withStyles(styles)is a function that will return…
- …another wrapper component function.
Yep, that’s how easy it is to overengineer in React/modern JS. The code above might not exactly be a good example of a well-designed component, but this gives you an idea of how things generally go.