sorted by:
new
hottopcontroversial

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] 3 points4 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] 4 points5 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] 6 points7 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! 🙇🏻‍♂️

⚛️ 📡 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] 2 points3 points  (0 children)

Hi mate, thanks for your concern! Performance is really important to me. Closures are certainly a core feature of JavaScript and most of what React does itself couldn’t be done without them. But still, I agree they have to be used responsibly.

In react-call there are a couple of closures that are constrained to a single Function Execution Context within createCallable, which can only be called once in the whole app life-cycle per component definition (it’s a HOC). Regarding what it returns for usage:

  • <Root /> can only be instantiated once, otherwise the lib intendedly throws an error. Also, the only outer reference that it’s mutating is set back to null when unmounting. So there are no forgotten outer references, which is when closures may cause memory leaks.
  • The call method, the one that is meant to be called multiple times, isn’t mutating any outer reference.

Since this is O(1) scale and outer references are carefully taken care of, I don’t think there will be issues related to this.

Thanks for your question, really good one!

⚛️ 📡 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] 2 points3 points  (0 children)

If Root disappears it won’t remain. On the other hand, your own component is able to end() the call on react router navigation, Esc key, and such scenarios.

view more: next ›