Grouping React Hooks with Arranger

Photo by Suad Kamardeen on Unsplash

I really enjoy using hooks. I think it’s one of the only innovative things to come into frontend architecture in a long time.

When hooks were announced, shortly after the library recompose was deprecated. Though I understood the reasons why, I still felt that the patterns used in recompose were something that I wanted to continue using going forward.

Arranger is a little library I made (1kb gzipped) that continues these patterns with hooks.

Let me demonstrate.

Here’s a component that displays a list of configurations, whose name you can edit. Whenever a new configuration is added, it will scroll to it and outline it for 3 seconds.

With Hooks

Here’s the same component using Arranger:

With Arranger

As you can see, the functionality is the same. Though the API is a bit different, I think the essence of hooks is retained.

I find separating logic from the view makes it easier for me to read and reason about a component . React hooks allows one to do this fairly easily, and arranger allows one to take it just a step further.

Thanks for reading! Please try the library yourself. If you have any suggestions or improvements, feel free to contribute!