DEV Community

Discussion on: State machine advent: Let the machine handle accessibility for you (18/24)

Collapse
 
mojitane profile image
moji ///

Hi, really enjoing this series getting into xstate. Thank you so much for the fantastic articles and real world use cases that aren't just super simple examples.
One question that's only tangentially related. I saw you are using a lot of "void" with your arrow functions. I know void is used to return undefined but I don't understand the benefit in the samples. Just to ensure there is no return?

Collapse
 
codingdive profile image
Mikey Stengel • Edited

Hey, thank you for reaching out. I'm glad you find them useful.

It's just a code preference and helps me think in events. One UI event handler = one event sent to the machine and possibly multiple actions, validations and side effects within the machine.

You can't ever do something like

<input onChange={(event) => void event.target.value && send({ type: 'WRITE', input: event.target.value}) /> 

As void true still yields undefined. Therefore, the event would never be sent. This forces me to write all the conditional code into the machine and keep as little logic in the UI as possible. 😊