Improve the experience
Does your UI handle the unpredictable nature of network requests and conditions?
- Reflect network request states: Clearly show the pending/success/failure state of the requests. For example, disable fields/buttons and show a spinner when the request is pending, show an error message if it fails, and update the UI and/or show a success message if it succeeds.
- Race conditions: A common reason is due to parallel network requests where the response order is not guaranteed. To handle this, you can keep track of the latest requests and ignore the results from the earlier ones, or make it such that your UI cannot fire multiple network requests at once, e.g. by disabling elements which trigger network requests after they're clicked.
- Request timeouts: Consider artificially showing that the request has failed (timed out) if the request doesn't receive a response after a stipulated duration.
- Consolidating requests: If the UI is making too many network requests, you can rate limit them by debouncing/throttling, or group them together and make only one single request (if the server side supports such a format).
- Caching: If a request with the same parameters has been made recently, can you reuse the previous response and save on a network round trip?
- Optimistic updates: Advanced technique where you show the success state before receiving a network response and revert the UI state if the request failed.
Import a module for its side effects only
Import an entire module for side effects only, without importing anything. This runs the module's global code, but doesn't actually import any values.
import "/modules/my-module.js";This is often used for polyfills, which mutate the global variables.