Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

useStateMachine: A ½ kb state machine hook for React

github.com

Post reply on HN
Print view View original

21–30 of 103 posts

Re: useStateMachine: A ½ kb state machine hook for React

#21

Post by wayneftw »

judofyr wrote: post #10
Waterluvian wrote: post #3

I can't get over how amazing hooks are and how resistant I initially was to them. They encapsulate logic so well and do an amazing job being this isolated data/event source. I find that I reuse them far more than I reuse components.

Interesting. I have the opposite experience, the more I use them the more clunky they feel. * If there’s only useState, then everything is mostly fine. All is good. * To avoid unnecessary re-rendering you’ll have to move callbacks into useCallback. These callbacks then also need to specify all of their dependencies. So many lines of code that are merely noise. * They encourage having state locally in the component wh…

> You forget one value in your dependency list and the weirdest things happen.

Don't you get eslint warnings right in your editor?

If you're using VS Code there's an extension for that...

Re: useStateMachine: A ½ kb state machine hook for React

#22

Post by radicalbyte »

codeflo wrote: post #8
k__ wrote: post #6

Earlier quoted context omitted.

They fit so well into React it's crazy. But they're also soooo idiosyncratic which makes them rather ugly on a general level.

They also come with many restrictions and rules on correct and efficient usage, not all of them checked by ESLint, that make the learning curve a bit brutal. But yes, insanely useful once you get the hang of them, they enable forms of abstraction and composability that you'll sorely miss when working in other UI frameworks.

Aren't there proper TypeScript bindings which catch (more) cases?

Re: useStateMachine: A ½ kb state machine hook for React

#23

Post by enjeyw »

runawaybottle wrote: post #11

Can anyone provide an example of a situation where something like this is a pragmatic solution? Please also provide the drop dead simple version too and explain why this would be more elegant and intuitive in comparison. Types of examples I am not interested in seeing: - a DropDown list using a state machine (or something similarly simple that’s been solved a million times in a simple way). Edit: I just think stuff l…

I’ve needed to construct a chatbot-esque UI on more than one occasion. I used a state-machine on the second time round and it simplified work considerably!

Re: useStateMachine: A ½ kb state machine hook for React

#24

Post by cacozen »

davidkpiano wrote: post #12
wilsonrocks wrote: post #9

I'm excited to try this. I've tried xstate many times and always struggled with the typescript, if this Just Works I'll be v happy

We're constantly working on improving the TypeScript experience with XState; there are some new things like `createModel()` that might help!

Oh, I need to try that too!

Re: useStateMachine: A ½ kb state machine hook for React

#25

Post by jhgb »

davidkpiano wrote: post #14
runawaybottle wrote: post #11

Can anyone provide an example of a situation where something like this is a pragmatic solution? Please also provide the drop dead simple version too and explain why this would be more elegant and intuitive in comparison. Types of examples I am not interested in seeing: - a DropDown list using a state machine (or something similarly simple that’s been solved a million times in a simple way). Edit: I just think stuff l…

Lots of good examples here: https://xstate-catalogue.com/ It seems like you're just unfamiliar with state machines. They're not a "new, weird abstraction", they're a core concept of computer science in general, and it can be argued that most code we write is itself an abstraction on top of state machines; not the other way around. For more information on state machines and statecharts, I recommend reading this great…

> It seems like you're just unfamiliar with state machines.

You're saying that he doesn't know computers? Computers are state machines. Presumably he used one to post his comment.

Re: useStateMachine: A ½ kb state machine hook for React

#26

Post by cacozen »

DylanSp wrote: post #7

Thanks for including the comparison to xstate; that's where my mind immediately went when I first saw this. Are there any plans to create a visualizer, similar to what xstate has?

Of course, XState is a huge inspiration and the golden standard of State Machines for JS. I visualizer is not on the short-term plan, but there’s a “verbose” mode that helps with debugging.

Re: useStateMachine: A ½ kb state machine hook for React

#27

Post by mrighele »

judofyr wrote: post #10
Waterluvian wrote: post #3

I can't get over how amazing hooks are and how resistant I initially was to them. They encapsulate logic so well and do an amazing job being this isolated data/event source. I find that I reuse them far more than I reuse components.

Interesting. I have the opposite experience, the more I use them the more clunky they feel. * If there’s only useState, then everything is mostly fine. All is good. * To avoid unnecessary re-rendering you’ll have to move callbacks into useCallback. These callbacks then also need to specify all of their dependencies. So many lines of code that are merely noise. * They encourage having state locally in the component wh…

> If you want something to execute once initially you can use useEffect with an empty dependency list, but note that then there’s no way of accessing updates values (in callbacks) and everything will reflect the initial state. Often you’ll have to use useRef just to keep track of the current state. Or maybe useState?

I'm not sure if I understood what you mean, but note that useState accepts not only the updated state, but also a function that takes the current state as argument and return the updated state.

In other words, instead of something like this

useEffect( async () => {

  ...

  const someValue = await someFunction();

  setState({...state, someValue });
}, [... ] );

you should use something like this

useEffect( async () => {

  ...

  const someValue = await someFunction();

  setState( currentState => ({...currentState, someValue }));
}, [ ... ] );

(the example is with async but it is the same for regular callbacks)

Re: useStateMachine: A ½ kb state machine hook for React

#28

Post by jhgb »

kaoD wrote: post #20
davidkpiano wrote: post #17

Earlier quoted context omitted.

Nobody's forcing you to use this library. Please take your negativity elsewhere. EDIT: Okay, didn't mean to interpret criticism as negativity; I apologize.

Criticism is not negativity. It's valuable when someone in the room challenges ideas and pushes back over-abstraction (if done respectfully and constructively).

Can you even describe the use of a state machine for UIs as "over-abstraction"? To me it seems more like an "under-abstraction", since one usually compiles a more abstract definition into a state machine - often a regular expression or some kind of grammar.

Re: useStateMachine: A ½ kb state machine hook for React

#30

Post by fuzzy2 »

runawaybottle wrote: post #16
davidkpiano wrote: post #14

Earlier quoted context omitted.

Lots of good examples here: https://xstate-catalogue.com/ It seems like you're just unfamiliar with state machines. They're not a "new, weird abstraction", they're a core concept of computer science in general, and it can be argued that most code we write is itself an abstraction on top of state machines; not the other way around. For more information on state machines and statecharts, I recommend reading this great…

No, I know what state machines are. What I’m contesting is the argument that this is an intuitive way to structure code. It could be intuitive to reason about, or even white board the states your application can be in, but this doesn’t look like concise and elegant code. From your examples: https://xstate-catalogue.com/machines/confirmation-dialog I’ve written a million confirm-dialogs in my lifetime, and that exampl…

I think your problem is that many things don’t have to be a state machine. And you’re right. It’s simply not a good idea to create a confirmation dialog like that.

However, some things just _are_ state machines. You don’t usually see them in the GUI (except for example wizards), but many parsers can trivially be implemented with state machines.

Post reply on HN