React

1354 readers

1 users here now

A community for discussing anything related to the React UI framework and it's ecosystem.

https://react.dev/

Wormhole

!pico8@programming.dev

Icon base by Skoll under CC BY 3.0 with modifications to add a gradient

founded 3 years ago

MODERATORS

Ategon@programming.dev

cufta22@programming.dev

Berserker@programming.dev

A React Hook For Asynchronous State Management. (positive-intentions.com)

submitted 5 days ago* (last edited 5 days ago) by xoron@programming.dev to c/react@programming.dev

2 comments fedilink hide all child comments

A fairly unique approach to state management using encrypted asynchronous state updates.

It is not production-ready. I'm working on it to use in my own projects. It isn't reviewed or audited by a third-party, so I can't recommend you use it in your own code. Sharing for testing and demo purposes only.

TLDR; The title of this post.

Feel free to reach out for clarity instead of reading the code/docs.

I was working on “react-like syntax for webcomponents”. I started off with an approach for asynchronous state management so that components outside the shadow-root could receive updates. (The events are also encrypted to secure against things like browser extensions.)

https://positive-intentions.com/docs/projects/dim/async-state-management

It then made sense to be able to persist that data so it can work between page releoads.

https://positive-intentions.com/docs/projects/dim/bottom-up-storage

The result looks and works like the following when used in a project.

https://positive-intentions.com/docs/projects/dim/encrypted-store

The Dim framework seems like a dead-end. I wanted to try the hook out on my existing React projects. So I created the equivalent React hook.

https://positive-intentions.com/docs/projects/dim/use-dim-store-react

I find it to be performant and I want to push the scale of the approach, so I am in the process of testing it out on my projects. A notable use-case there is storing encrypted files at rest.

Feel free to reach out for clarity.

top 2 comments

sorted by: hot top controversial new old

[–] gwl@lemmy.blahaj.zone 1 points 4 days ago (1 children)

It could be neat to get a compare/contrast against other async state hooks (Tanstack Query, react-async-hook, the new built-in of use())

[–] xoron@programming.dev 0 points 4 days ago

Those are useful hooks for their own purpose. My approach might be more comparable to redux.

In contrast to redux, in this approach, we can update a state value and all other components listening will receive and update accordingly. Redux does this in a deterministic render and compares the vdom for what to update.

The origins on my approach is from trying to create it for webcomponents where components between different shadow-roots need to share an update.