Stop Prop Drilling Your React Modals (Use react-call)

EnglishالعربيةDeutschEspañolFrançaisहिन्दीBahasa Indonesia日本語한국어PortuguêsРусский中文
BBetter Stack
Computing/SoftwareInternet Technology

Transcript

00:00:00React just got a super interesting new tool that completely changes how we think about
00:00:05rendering interactive UI elements like modals, dialogues, or confirmation boxes.
00:00:11It's called React Call.
00:00:13If you've ever built a complex multi-step form wizard, a confirmation modal, or an item
00:00:18picker in React, you already know that managing open states, passing success callbacks, and
00:00:24handling promises can turn your code into an absolute spaghetti mess.
00:00:28But React Call is designed to solve this issue.
00:00:31So in today's video, we're going to take a look at React Call, see how it works, and look
00:00:36at some of the code examples.
00:00:37It's going to be a lot of fun, so let's dive into it.
00:00:44So what exactly is React Call?
00:00:47Well, it is a tiny lightweight utility that allows you to call React components like asynchronous
00:00:52functions.
00:00:53Think about the native browser window.confirm API.
00:00:57When you call it, your code literally pauses, waits for the user to click OK or cancel, and
00:01:03returns a Boolean value right in line.
00:01:06It keeps your business logic entirely local to the caller.
00:01:09And React Call brings that exact same intuitive mental model directly into the modern React world.
00:01:16Instead of creating a separate state variable like isModelOpen, passing down an onClose or an
00:01:22onSubmit prop, and setting up complex context providers or portals, you can simply await the
00:01:29component's response.
00:01:30Under the hood, it abstracts away the promise management, handles type requests and responses
00:01:36out of the box, and fully supports hot module replacement, so your development workflow stays
00:01:41fast.
00:01:42And it brings three concepts to the table: root and stack, upsert, and mutation flow.
00:01:48So the first major concept is root and stack.
00:01:50With React Call, the callable component you create isn't a function.
00:01:54It actually acts as its own mounting point in your application tree.
00:01:58You place the component as a root tag anywhere visible, like in your app file or a high-level
00:02:03layout file, and it sits there as a listener.
00:02:06When you trigger multiple calls, React Call manages them using an internal stack, and it
00:02:11handles rendering every active instance automatically.
00:02:14And it also handles clean exit animations when they close and keeps the instances isolated so
00:02:20they don't step on each other's toes.
00:02:22Next up is upsert, which is an absolute lifesaver for singleton UI patterns.
00:02:27Normally, if you call a component multiple times, it pushes a new instance onto the stack.
00:02:33But what if you're building a global notification toast, or a loading overlay, or a progress
00:02:39indicator where you only ever want one instance on the screen at a time?
00:02:45Well, instead of executing call, you can execute upsert.
00:02:48And if an instance is already active, it smoothly updates the existing component with your new
00:02:52data on the fly, rather than spawning a duplicate.
00:02:56And finally, we have mutation flow.
00:02:58So this library includes a built-in useMutationFlow hook specifically designed to tie your callable
00:03:04UI directly to async actions.
00:03:06If you have a confirmation model that triggers a heavy backend API request on submit, the hook
00:03:12manages the pending state for you out of the box.
00:03:15It ensures the model stays open and shows a loading spinner while the async function runs and
00:03:21only officially ends the call once the promise successfully resolves.
00:03:25So it bridges your UI state and your data mutations beautifully.
00:03:29So now let's look at some practical examples in their website, because I think they're super
00:03:34self-explanatory.
00:03:36And I think they also show how little code you actually need to write to get something going.
00:03:41So for example, in the confirm dialog, we just need to create a callable over here.
00:03:48And then we wrap our component as a higher order component with this create callable hook.
00:03:54And then we can pass the call and functions for our buttons on click.
00:04:01And that's everything we need for the callable object.
00:04:04And at the root, we just need to import the component itself.
00:04:08And for the delete button, since our confirm component is wrapped with the create callable
00:04:14higher order function, we can simply invoke it asynchronously on this handle click function.
00:04:21So very neat, very tidy, not a lot of boilerplate.
00:04:26And you don't have to use any context providers or state variables or redux or zoo stand.
00:04:31And if you want to dive deeper, how many use cases there are, you can check out the example
00:04:36section and each example also provides a code snippet.
00:04:40Some of these are even highly complex, like for example, the ones that deal with asynchronous
00:04:46actions running in the background.
00:04:49So you can check out all of these cool examples.
00:04:52I think it's super cool and super lightweight.
00:04:55Well done.
00:04:56So there you have it, folks.
00:04:57That is React call in a nutshell.
00:04:59Well, you could certainly code up a basic custom promise wrapper or a single modal yourself.
00:05:06I think this library handles all the tricky edge cases beautifully, like handling multiple
00:05:11active instances in a stack or updating singletons via upsert and syncing UI states with heavy
00:05:17backend mutations.
00:05:18So I think it's a super nice lightweight utility to keep in your frontend toolkit for a cleaner,
00:05:24more readable React architecture.
00:05:26What do you think about React call?
00:05:28Do you like this pattern?
00:05:29Will you use it in your projects?
00:05:31Let us know in the comments section down below.
00:05:33And folks, if you like these types of technical breakdowns, please let me know by smashing
00:05:37that like button underneath the video.
00:05:39And also don't forget to subscribe to our channel.
00:05:42This has been Andrus from BetterStack, and I will see you in the next videos.
00:05:58you

Key Takeaway

React Call streamlines UI interactivity by treating components as asynchronous functions, replacing prop drilling and state variables with a promise-based architecture.

Highlights

  • React Call allows developers to trigger components like asynchronous functions, returning values directly in line without complex state management.

  • The library eliminates the need for manual prop drilling, context providers, or global state management libraries for modals and dialogs.

  • Root and stack management automatically handles multiple active component instances and ensures clean exit animations.

  • The upsert feature updates existing components with new data instead of creating duplicates, suitable for singletons like toast notifications.

  • The useMutationFlow hook synchronizes UI states with asynchronous backend requests, keeping components open during processes and providing automated loading indicators.

Timeline

Concept and Problem Statement

  • React Call renders interactive UI elements like modals and dialogs by treating them as asynchronous functions.
  • The tool solves code complexity caused by managing open states and callbacks for multi-step forms and dialogs.

Building interactive components often leads to spaghetti code involving state variables like isModalOpen and complex success callbacks. React Call introduces a model similar to the native browser window.confirm API, allowing developers to await component responses directly.

Core Mechanisms

  • Callable components act as unique mounting points, allowing multiple instances to exist within an internal stack.
  • Upsert functionality prevents duplicate instances by updating existing components with new data on the fly.
  • The library manages promise state internally while supporting hot module replacement for development efficiency.

Developers place a root tag in the application layout to serve as a listener. When multiple calls trigger, React Call manages them independently. The upsert feature specifically targets singleton patterns like loading overlays or toast notifications where only one instance should appear.

Async Integration and Practical Usage

  • The useMutationFlow hook manages pending states for backend API requests, automatically handling loading indicators.
  • Implementation requires wrapping components with create callable and invoking them asynchronously at the trigger site.
  • This approach removes the necessity for Redux, Zustand, or additional context providers for basic component interaction.

For confirmation modals triggered by heavy backend actions, useMutationFlow ensures the UI remains open and displays a loading state until the promise resolves. This architectural shift significantly reduces boilerplate code by bypassing traditional state propagation methods.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video