Stripe Frontend Engineer System Design Questions

The Stripe dashboard search feature allows users to look up data. However, sending an API request for every keystroke can lead to performance issues. Implement a debouncing mechanism for the search input, ensuring that rapid inputs do not overwhelm the server.
Problem statement: Create a debouncedSearch function that accepts a function apiCall and a wait time in milliseconds, returning a new function. This new function should call apiCall only after the user has stopped typing for the specified wait time.
- Example 1:
- Input: debouncedSearch(apiFunction, 300)
- Output: Function returned that waits for user input before making the API call.
Constraints:
- Ensure that the debounced function doesn’t execute until the wait time has elapsed after the last user input.

As Stripe continues to evolve its single-page application (SPA), an efficient client-side router is vital for handling navigation without full-page reloads. This component should manage multiple routes and render the corresponding components accordingly.
Problem statement: Please design a Router class that supports the following methods:
- addRoute(path: string, component: Function): void — to define a new route.
- navigate(path: string): void — to navigate to a specific route, triggering the rendering of its associated component.
- getCurrentRoute(): string — to get the currently rendered path.
- Example 1:
- Input: addRoute('/home', HomeComponent)
- Output: undefined
- Explanation: This method registers a new route but does not return a value.
Constraints:
- All paths are unique and strictly follow a '/' notation.
- Components are simple functions that return JSX elements.