In this article, I am going to talk you through how I used a React hook, namely useReducer, to create a smooth onboarding process for a healthcare app that I and my team at RebelDot have developed recently.
- Why is the onboarding process crucial in developing a healthcare app?
- How did the decision tree idea emerge?
- What is a decision tree and why developing one?
- How to create a decision tree using React Native?
- What is useReducer and how to use it?
- A small way to digitalize healthcare.
Why is the onboarding process crucial in developing a healthcare app?
Working on this healthcare project, I stumbled upon a challenge, trying to implement a complex feature within a relatively brief period of time.
To give you some context, the idea for this feature arisen in the very last stages of the development process, which is why finding a fast, yet effective solution was crucial to the project.
This feature was a decision tree needed for the user onboarding process, an essential machine learning-like feature to any healthcare app or healthcare digital product developed nowadays.
It was imperative that the doctors knew relevant details about their patients so they can create an accurate diagnosis and treatment.
Thus, we had to create a dynamic onboarding process, intuitive and not repetitive, focusing only on a limited number of important questions, such as questions about any chronic diseases or allergies that the patient might suffer from, as well as details about its family medical history.
How did the decision tree idea emerge?
The first and perhaps most basic solution that we thought of was limiting the questionnaire to a simple form (.text input) where the questions are screened one after another and the user has to complete the answer to all those questions.
Now, in terms of implementing this type of approach, it is fair to say it would have been an easy process and most of all, a time-convenient one.
But.
Not so user-friendly and efficient.
Patients would have had to waste time answering an entire list of questions, even questions that might not be according to their circumstance while doctors would waste their time too, going through all those answers.
Instead, we decided to build something user-intuitive and easy to complete.
A decision tree.
What is a decision tree and why developing one?
This meant that the onboarding process and respectively the introductory questionnaire addressed to the users would now be based only on relevant questions, also having a series of predefined answers as well as the option to add custom ones.
If you have ever worked with SurveyMonkey or Qualtrics, you probably know what I am talking about – adding a questionnaire/survey logic so that subjects would skip unnecessary questions.
To give a more technical explanation, a decision tree is a decision support tool that uses a tree-like model of decisions and their possible consequences. It is one way to display an algorithm that only contains conditional control statements.
For example, should the user provide a positive answer to a yes/no question, the following question might be based on that particular answer. In the case where the answer was negative, then, according to the established flow, the questionnaire will move on to the next question, without addressing the one specifically designated for those who answered the following positive.
In simpler terms, though, think of it as a dynamic questionnaire that alters its questions in real-time depending on the answers you provide.
How to create a decision tree using React Native?
I started with a simple ‘useState‘, but seeing that I need to add a lot of data to that state (and starting to look like a list of objects), I realised that my simple state can’t handle that amount of changes, so I started looking for an alternative that would save the entire team time and allow us to launch the product on the initially established deadline.
This is how I began working with ‘useReducer’, an alternative solution to ‘useState’, a react hook which helps managing complex state.
I read about all the react hooks, but the truth is that there are a lot of them which are rarely used, like ‘useMemo‘, ‘useCallback‘, or our ‘useReducer. Working with Redux before helped me understand the way ‘useReducer’ works.
In the beginning, my ‘useReducer’ state was pretty simple, but developing the algorithm and discovering every corner case, I ended up with a complex and strong component that allows me to deliver the onboarding process.
So I had a complex state and useReducer which handles complex states. This was the perfect fit that helped me to deliver a feature that appeared so hard to implement.
What is useReducer and how to use it?
Let’s start with some general information about what is useReducer and why it can be used.
useReducer is an alternative useState, the big differences are that useState is used for managing simple states (like strings, booleans, etc.) while useReducer is perfect for complex ones (state objects with multiple sub-values).
For those of you who are familiar with reducers, can easily understand how React’s useReducer hook works.
This is how you can use it, we have the state and the dispatch method attached to that state (as I said above, if you worked with reducers, you should know what dispatch is)
const [state, dispatch] = useReducer(reducer, initialState);
reducer is a function responsible for handling all the actions that are dispatched, hence modifying the new state.
initialState is, well.. the initial value of the state.
In our case, the initial state is a list of questions with important sub-values such as question category, question text, answers (a list of objects), a prop which says if the questions accept multiple answers (boolean), a prop which says if the questions will be asked (a boolean) and other.
Answer objects contain the answer text, the effect that that answer will have and the list of question indexes that will be affected by that answer.
In reducer I have defined the next actions: adding an answer, removing an answer, affecting a question and refreshing all the answers.
So how this work? When a user selects a predefined answer, the ADD_ANSWER action is dispatched (the answer will be saved) and the APPLY_EFFECT is dispatched to every question from the list of questions that is affected by that answer.
The last action will set if the questions will be displayed to the user or not.
A small way to digitalize healthcare.
Relying on this solution, this sort of machine-learning-like algorithm, allowed automatization of processes, eliminating the manual tasks and smoothening extraction of data directly from electronic records.
Besides, it created the possibility for doctors to predict trends in the patient conditions and their behaviors by discovering connections and relations from seemingly unrelated information, patterns that could then be used by to determine diagnoses, prognoses and treatments for patients in healthcare organizations.
On a more personal note, although I was a little scared when this task was assigned to me, I am now grateful for this, as the overall experience taught me that sometimes the solution is hidden in plain sight and that time pressure will have you uncover those solutions when you expect it the least.
Well, if you are looking for a reliable healthcare app development company to bring your idea to life through the latest tech and a user-centric design, then don’t hesitate to reach out. 🚀
You might want to read our latest case studies where we present how we developed a telemedicine app, as well as a management software provider for healthcare facilities.
