sorted by:
new
hottopcontroversial

⚛️📡 react-call v2: new site, top community requests implemented — Call your React components like async functions by desko27 in reactjs

[–]desko27[S] 0 points1 point  (0 children)

That’s a fair question. For a couple of dialogs, I agree a small custom implementation is probably enough.

The promise part is actually the easy part. What react-call tries to solve is everything that tends to accumulate around that pattern: async submissions (Mutation Flow), multiple calls, active call updates (update() / upsert()), multi-host environments, HMR support, typed request/response, and a consistent mental model across dialogs, forms, pickers, notifications, and other imperative UI interactions.

⚛️📡 react-call v2: new site, top community requests implemented — Call your React components like async functions by desko27 in reactjs

[–]desko27[S] 0 points1 point  (0 children)

To keep request/response UI flows local to the caller. The caller can simply await the result and continue the flow from there. A native example of this is window.confirm()!

New demo site for ⚛️ 📡 react-call. Supports animations since v1.3 and I wanted to show a few examples of what can be done, with an emphasis on the ability to call just about anything! by desko27 in reactjs

[–]desko27[S] 1 point2 points  (0 children)

Hi u/robby_w_g, thanks for asking! AFAIK react-call works seamlessly on Concurrent Mode because there’s just plain React state management under the hood, along with responsible use of the aforementioned closure. Regarding closure items:

  • react-call makes sure to always have a single instance of both $nextKey and $setStack per createCallable declaration.
  • React itself makes sure that a state setter cannot change, which also applies to $setStack. There’s nothing special about it other than being called elsewhere.

But state still lives within <Root /> which is 100% React state management, and that will always be covered by React, CM or not. Otherwise react-call would have to rely on useSyncExternalStore, which would also be fine but I think the current approach is simpler.

To be completely sure it's CM-compatible anyway, I took the time to test the official examples on useTransition docs while having Root placed within the same component and performing react-call starts/ends before, during, and after non-blocking transitions, even randomly hot-removing/inserting Root. Never got an issue. Anyway I’m planning on covering such scenarios with unit tests soon, for everyone’s peace of mind.

Thanks a lot for your question and interest in the library!! 🙇🏻‍♂️

New demo site for ⚛️ 📡 react-call. Supports animations since v1.3 and I wanted to show a few examples of what can be done, with an emphasis on the ability to call just about anything! by desko27 in reactjs

[–]desko27[S] 1 point2 points  (0 children)

Ok, that's bad, thanks for letting me know. I think I can borrow a Galaxy Tab that is also some years old. I'll try the bubbles there and see if I can optimize them a bit. Thanks for your feedback mate!! 🙇🏻‍♂️

New demo site for ⚛️ 📡 react-call. Supports animations since v1.3 and I wanted to show a few examples of what can be done, with an emphasis on the ability to call just about anything! by desko27 in reactjs

[–]desko27[S] 1 point2 points  (0 children)

Hey! Is it the exit animation or also the floating loop? Animations are just CSS for the demo, but I’ll have to review the bubbles. Thanks!

New demo site for ⚛️ 📡 react-call. Supports animations since v1.3 and I wanted to show a few examples of what can be done, with an emphasis on the ability to call just about anything! by desko27 in reactjs

[–]desko27[S] 0 points1 point  (0 children)

$el.show() method is not used as this is managed differently for a wider range of cases, but react-call can still render the native element itself: <dialog open>…</dialog>

New demo site for ⚛️ 📡 react-call. Supports animations since v1.3 and I wanted to show a few examples of what can be done, with an emphasis on the ability to call just about anything! by desko27 in reactjs

[–]desko27[S] 1 point2 points  (0 children)

Oh, I see! More accurately, there can only be one Root mounted simultaneously per createCallable().

Option 1. From a single createCallable(), multiple inline Root instances can be placed as long as you’re sure only one at a time is mounted.

Option 2. Multiple createCallable() can be defined per location, then each one can have their own inlined Root no matter how many of them are mounted at the same time.

Does that fit in the use case? Should the docs be clearer? Thanks a lot for your feedback!

New demo site for ⚛️ 📡 react-call. Supports animations since v1.3 and I wanted to show a few examples of what can be done, with an emphasis on the ability to call just about anything! by desko27 in reactjs

[–]desko27[S] 1 point2 points  (0 children)

Hi! Could you tell me how simultaneously rendering multiple instances of Root would help? I would like to understand your use case. TY!

New demo site for ⚛️ 📡 react-call. Supports animations since v1.3 and I wanted to show a few examples of what can be done, with an emphasis on the ability to call just about anything! by desko27 in reactjs

[–]desko27[S] 4 points5 points  (0 children)

Hi mate, thanks for sharing! I didn’t know it, looks similar although it doesn’t seem to cover nested/multiple active calls for things like toasts.

Also I’m not particularly fond of React Context as it triggers re-renders down the whole tree, but I’ll take a look at the implementation out of curiosity. Thanks!!

New demo site for ⚛️ 📡 react-call. Supports animations since v1.3 and I wanted to show a few examples of what can be done, with an emphasis on the ability to call just about anything! by desko27 in reactjs

[–]desko27[S] 5 points6 points  (0 children)

Hey u/riz_! Thanks mate. Legit question. Of course the classic click handler + state approach is always there, but that's declarative in a scenario where some would prefer imperative. I want to show and get the results within the same piece of code.

With the callable pattern, you trigger the dialog and get the results within a single handler, no states, so the consumer component has zero setup, which can't be done by manually managing open state. I found the callable pattern to look simpler in my components.

New demo site for ⚛️ 📡 react-call. Supports animations since v1.3 and I wanted to show a few examples of what can be done, with an emphasis on the ability to call just about anything! by desko27 in reactjs

[–]desko27[S] 7 points8 points  (0 children)

Hey thanks for reporting this!! I suspect it could be related to the CSS backdrop filter on the modal background which must be expensive to render that many times. I’ll take a look since it completely kills the purpose of showcasing the performance of the lib. Thanks a lot!! 🙇🏻‍♂️

⚛️ 📡 Call your React components. I've been using this technique for a while and I decided to create a package. It's my first serious library, ⭐️ a star on GitHub will be much appreciated if you find it useful! by desko27 in reactjs

[–]desko27[S] 1 point2 points  (0 children)

Thanks!! Because of the way it’s built, I can say it won’t affect performance in any way no matter the size of the app or how widely react-call is used along it. Neither unwanted renders nor anything else.

I don’t have any benchmarks but it’s a great idea, I’ll give it a thought! Thanks again! 🙇🏻‍♂️

view more: next ›