State Management made simple with hookState in React-Native

Photo by Javier Quesada on Unsplash

Over at Jupiter, we’re building new tools for fitness trainers to make it super simple to manage their clients. We’re working on releasing our app and it’s going to be out pretty soon! Recently we were building a feature to create new workouts which had multiple nested components, where we’d have to dynamically add or delete components as well as take input from the user. After we’d capture the form, we’d need to post it to our backend, which means we’d need to have a single view of all the data.

The Problem

Components for a Workout

To start with, we had a Workout Object, which is the top level component. We needed to capture a form where users would be able to dynamically add or remove components, as well as update their fields as required. Now, we could do this with Hooks, but we’d need to store the state in the parent object and then pass it down 2 levels to be able to store all the response in the Workout component.

One of the reasons why it must be in the Workout component is because we’d need to collect all of the data before we could submit it back to the backend, so we need to have an overview of all the inputs we’d take in the children components. We tried implementing this with hooks but we knew that we’d have to write a lot of other components in the future which would have similar patterns, and it was worth us investing in a state management library.

The Solution

Enter hookstate. What is hookstate? Well, it’s not the hooks API that was created by React. Maybe that’s why you don’t see this library in the first 2 pages in Google. But it’s a really simple, lightweight library and it can be pretty great for certain use cases. Whilst I personally love hooks, it’s not ideal for nested or deeply nested components.

Here’s the code below for what turned out to be a really simple solution.

This is basic React, and we’re not really doing anything different, except for the fact that we’re using the Hookstate library.

This is where using Hookstate really paid dividends! The concept of scoped state really simplified the codebase. In short, it converts the exercise props into a writeable object (That’s how I think of it anyway!) with just one line of code.

We’re doing the same thing here where we’re passing the Set object to the Set component, so that we could get the value of reps and weight for each set, as well as the ability to delete Sets.

So in essence, hookstate made it super easy to manage state across different components. We have 3 components and we can dynamically

  • Capture user input
  • Add new components
  • Delete current components

We can do this with just 20 lines of code.

There’s no boilerplate code and it looks React-ish and it’s easy to read what it does.

I personally struggled to figure out how the API works as there’s not as much documentation about the library as there are for others, so I thought I’d share my experience in case it helps someone else out there. Here’s the final diagram with the final solution. There’s a lot of code in addition that I haven’t added here, but I wanted to keep it simple and highlight how awesome hookState is to the community! Here’s the final component diagram with the functions as well.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store