State-driven interfaces with XState

Hey 👋

Diky Arga

Squad Search EXperience 🔍

https://dev.to/davidkpiano/no-disabling-a-button-is-not-app-logic-598i

What's State?

A state is a representation of a system in a given time. State refers to the data stored in Application in the form of a string, arrays, object, etc.

https://medium.com/@nitin15j/frontend-state-management-44169546a2f7

ex. is user logged-in?, is Loading?, is Error? is Wahyudi?

Basically, we as a frontend dev is getting paid to manage states

isLoading?

isError?

isAbela?

How do we manage state?

basic fetch and set the data

loading lama, tambah loading bar

kadang error, tampilin error message

user plin-plan, mau batalin request

What could go wrong?

What if fetch fails?
What if user tap the button twice?
What if user want to cancel fetch request?
Disable button when fetching
Show loading progress
Show error message
What if request is restricted/blocked?
and so on..

The problems with

Event Driven Interfaces

The code doesn’t accurately represent our component’s intended behavior
boolean variable like isLoading, isError, isSuccess, isMail is hard to manage and error prone
Not declarative
what to do with isSuccess?
No separation of concerns
nasi ruwet code in a component

A batter way (hopefully)

State Driven Interfaces

Finite State Machine

FSM

What is?

https://slides.com/davidkhourshid/finite-state-machines#/13

FSM is everywhere

FSM for developing UI?

XState

JavaScript state machines and statecharts

by David K Piano

https://xstate.js.org/docs/

Let's simplify our life

by rewriting our owsem app with state machine

Advantages

Declarative (named state, listed all possible state)
Easier to test
Separation of concerns (view, logic, data fetch)
Framework Agnostic
Visualization
Common language between developer and designer

The cool things about XState

XState Vizualizer

https://xstate.js.org/viz/

yarn add @xstate/fsm

Only 1 KB

Do we really need library like XState?

No

function dogReducer(state, event) {
  switch (event.type) {
    case "FETCH":
      return {
        ...state,
        status: "loading"
      };
    case "RESOLVE":
      return {
        ...state,
        status: "success",
        dog: event.data
      };
    case "REJECT":
      return {
        ...state,
        status: "failure",
        error: event.error
      };
    case "CANCEL":
      return {
        ...state,
        status: "idle"
      };
    default:
      return state;
  }
}

const initialState = {
  status: "idle",
  dog: null,
  error: null
};

you can use reducer

No

function DogFetcher() {
  // 'idle' or 'loading' or 'success' or 'error'
  const [status, setStatus] = useState('idle');
}

you can use as simple as useState

Already miss isLoading?

function DogFetcher() {
  // 'idle' or 'loading' or 'success' or 'error'
  const [status, setStatus] = useState('idle');

  const isLoading = status === 'loading';

  return (
    // ...
    <button disabled={isLoading}>
      {/* ... */}
    </button>
    // ...
  );
}

Trade-off with State Machine

https://slides.com/davidkhourshid/finite-state-machines#/32