Here at wattx, our framework of choice is React (with Redux). Many projects have been built using this technology and we are constantly looking into how can we improve our products and further development.
During this hackathon, Rafal wanted to explore two libraries, Reselect (1), and Recompose (2). Both of these are mature and very popular amongst other developers and could help the team simplify our products from a tech perspective.
Reselect
Reselect is a Selector library for Redux. Dan Parker wrote a very nice introduction for those of you who may have never heard of Reselect before and are interested in the matter.
One of our current projects relays heavily on big datasets. Data manipulation was already happening in a functional way (without mutation being involved) and this is where Reselect could prove itself useful in our use case.
By creating multiple selectors, Rafal was able to achieve even better performance and flexibility. All selectors are composable – they can be combined together (as an input for other selectors). Our code did not only become cleaner, but we also got memorization out of the box.
Recompose
Recompose is a React utility belt for function components and higher-order components. So far, reusable components were always Rafal’s priority when working on a (new) project. Small components are easy to understand and serve one purpose. They are also more reusable than bigger components with a state and conditional render method. Recompose helps you prevent abuse of the `setState()` method by using Higher-order Components (HoC). “Dumb” components can be enhanced with the HoC-function and return new components which could be again enhanced.
Using this approach, he was able to simplify one of the most complex `Plot` components we got at WATTx (it renders different charts, such as bars, lines, or scatter plots based on different datasets and props). The final solution not only leverages utility methods from Recompose but also creates a very natural “waterfall” component which we were able to reuse in different places without writing a single line of code.