Loading WASM in the front-end

When it comes to loading WASM in our frontend application, we must carry out the steps sown in figure 7.1.

Figure 7.1 – Steps to Run a WASM Function in the Browser

Figure 7.1 depicts the steps below:

1. A React component makes a request to the file server for the WASM file.
2. The file server gets the WASM file.
3. The file server then returns the WASM file back to the frontend for the requesting React component to load it.
4. The WASM functions are then stored in the component state to be called as and when needed.

Even though it might be intuitive to handle the WASM loading and function in the task component, we would end up requesting a WASM file for every task in our to-do application. For our toy project this might be ok as we will not notice any difficulties, however, as the application scales and more users use our application, we would really struggle to keep up with demand. We could reduce the number of calls by caching in the browser and we can do...