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

11–20 of 103 posts

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

#11

Post by runawaybottle »

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 like this is too weird and dangerous to evangelize, and I’m at my wits end in dealing with simple components that have been over abstracted.

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

#12

Post by davidkpiano »

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!

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

#14

Post by davidkpiano »

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 resource: https://statecharts.dev/

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

#15

Post by wilsonrocks »

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!

Oooh createmodel is new to me - will check it out!

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

#16

Post by runawaybottle »

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…

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 example is one of the most convoluted things I’ve ever seen.

Guys, just because it’s in Computer Science, doesn’t automatically mean it’s a more sophisticated solution. The term for this is over-kill.

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

#17

Post by davidkpiano »

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…

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.

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

#18

Post by deergomoo »

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…

> 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.

I really like Vue 3’s Composition API as a much easier-to-use (IMO) implementation of hooks.

It’s conceptually very similar to React Hooks, but the method that defines them only runs once, when the component is instantiated. So straight away that removes any worries around conditionals and loops.

Instead of a plain value/object and an update function, the “hooks” instead return a reactive object that tracks it’s own dependencies (which are also all reactive objects). That removes any need to manage dependencies yourself, or for any memoization.

The only downside is that because a plain value (like a number or something) cannot be reactive, it has to be wrapped in an object and accessed via a “.value” property, but this is only relevant in the setup function. Anywhere else, like the Options API or in the template, accessing the value like a value will just get transparently proxied to the object.

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

#19

Post by runawaybottle »

davidkpiano wrote: post #17
runawaybottle wrote: post #16

Earlier quoted context omitted.

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…

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.

Fair enough, but the echo chamber is why stuff like this gains prominence. I’m abrasive for sure, but I need to see some push back on these ideas in all of these threads.

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

#20

Post by kaoD »

davidkpiano wrote: post #17
runawaybottle wrote: post #16

Earlier quoted context omitted.

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…

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).
Post reply on HN