React backdrop component for waiting the response of a function
Imagine you have a React application and you need to call an asynchronous method and is mandatory to wait for its response in order to execute the next action or show the next view. In that case, your user interface needs to freeze and wait until such method finishes, otherwise the application could crash or give the wrong answer or show the wrong result.
This article is about an example that shows a way to approach previous problem creating a React component using Material-UI. Full code can be found here.
Parent component
Parent component must include three main things. First, a state for showing or removing the modal waiting component; then, the asynchronous function to be executed and the function for handling the response of such asynchronous function. In order to completely set the example, a handle for the onClick event of a button will be defined. The main purpose of parent is controlling when the modal component is shown and as consequence controlling when the function should be executed.
When the user clicks the button, parent component changes its state in order to mount the modal component by means of handle clickMe. The component is responsible for showing a waiting backdrop and executing asynchronously the function, putting everything on hold, including the user interface, until a response is obtained. Essentially, parent delegates asynchronous function execution to its child.
The function to be asynchronously executed by the component is funTowaitFor and is passed as property and defined by parent. The asynchronous function simulates a process that takes 2s to complete by means of a promise and the setTimeOut function. The promise resolves to the argument sent also as property.
Once the function finishes, it returns control to parent by means of the method that will handle the response (handleResponse), also defined by parent. Method handelResponse will just alert the value returned and will change the state again in order to unmount the modal component.
Modal waiting component
The job of this component is opening a modal screen that will appear in front of the user interface making it inaccessible, after that, the parent’s asynchronous function starts and until that function returns a value everything else outside the modal screen will be out of range. After the function finishes, the backdrop disappears and parent handle the response obtained by the modal waiting component.
This component has four methods, the constructor, the handle for closing the backdrop (handleClose), the render method and the overriding of lifecycle method componentDidMount.
The constructor will set component fully visible and bind “this” to methods that require it. Setting visibility of backdrop in true will make it visible immediately after being mounted.
Handle for closing the component (hadleClose) will change visibility state to false in order to close it. When the component is closed, it calls the method in charge of handling the response sent as a property (handleResponse).
Render method returns the component FullModal that will be explained below.
Inside the method componentDidMount is where the main purpose of the component takes place. After the backdrop is shown, which means that the render method has been called, and in consequence, the user interface of parent is inaccessible, the component calls the asynchronous function and waits for it. Once the function finishes and the response is collected, handleClose is called sending as parameter the response obtained, which in turns, besides closing the backdrop, informs the parent the response by means of the method handleResponse.
Material-UI for creating the backdrop
To create the visual effect propose in this example the component makes use of Modal component of Material-UI. If the library is not installed in the project it can be done executing the following command.
npm install @material-ui/core
The modal screen will occupy the entire area and will show a text with an animation indicating work. After that, all that is left is giving style.
Final considerations
Since with React’s static apps page switch behaves slightly different to traditional way where pages are rendered in server or are declared in different documents. When a request of a new view was sent to server, all pending functions resolve outside the browser and the view would not show until the server considers it appropriate by sending it back to client. In this new approach proposed by React, there are new requirements in order to guarantee that synchronicity does not affect the right behavior of the interface during view switching. Is in this cases when components like this one may be very useful in order that final user could smoothly enjoy of the best experience.
