State Chart in Real-world

Anand — Sat, 06 Feb 2021 00:44:37 +0000

Implementing Complex Requirement in React

Due to complex business requirements, the moment a React developer adds multiple useEffect, useState & useQuery, he/she finds that such component's code is not fun to read & change.

I worked on similar business requirement for our Login component :-

On load of Login page, fetch product offerings, and wait till it finishes.
Take the user to the error page if it fails.
Verify that product_code query parameter present in URL belongs to one of the products in product list recently loaded, if not then redirect to product offering page.
If product_code query parameter is valid, then verify if accessToken present in sessionStorage/cookie is valid and not expired, if yes redirect user to retrieve application flow.
if accessToken is not valid, load the latest marketing campaign. Wait till it get loaded and then redirect user to OAuth based login flow (we show latest campaign on login page).

I implemented the above using plain useEffect, useQuery of apollo and useState, but code was complex. I spent a couple of hours making it possible to comprehend, but wasn't satisfied with the end result. Most of you surely have similar business requirements. I am curious to find how you solve such a requirement using React or any other way.

Statechart based development

For a simple example app, it may look over-engineering to use state-machine (though conf talks by David explains how even, simple requirement hide complexities/bugs in it).
We use xstate to implement a long funnel in our application.
I was aware about state/transitions/events/guards in xstate. We used it to build the skeleton of our funnel and flow in pages. But we were yet to utilize -

These two concepts are what make it really useful to tackle non-trivial real world problems using state-charts. This is how my machine looked for above requirement -

Then I realise that state-chart spec (or XState docs) is vast because it does cover all our use cases. We still have a long way to adopt xstate fully, but I am sure it'd be worth since it offers following lofty benefits :-

Formalism of logic and Visualization
Ease of unit testing (compare to unit testing the logic written in react UI components)
Auto Generated E2E test code
Ease of applying Analytics

I am already seeing the first two benefits in our codebase, As a team, we are trying to reach the level where we can gain the benefit of (3. & 4.).

DEV Community: Anand

State Chart in Real-world

Implementing Complex Requirement in React

Statechart based development