Rant: Overengineering

2019-07-16 22:48

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:

`MyComponent` may possibly be a functional component (a function that accepts a single `props` argument and returns a React element), so it might count as a function.
`mapStateToProps` is a function that returns the mapping of the decorated component properties to Redux store state.
`connect(mapStateToProps)` will return...
...a decorator function that returns a wrapper component around `MyComponent`.

functional component

function that returns the mapping

decorator function

And we're only done with the first part of this abomination! Now let's proceed to the outer block:

`styles` has to be a function when you need access to theme properties.
`withStyles(styles)` is a function that will return...
...another wrapper component function.

has to be a 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.