SoFi·Software Engineer·Technical Phone Screen·Senior

SeniorPrefer not to say

Apr 2026Remote

Summary

SoFi full-stack screen, one coding problem the whole time. They wanted pure vanilla JS, no libraries, which honestly tripped me up a bit since I've been living in React land for years.

Questions Asked (1)

Using only vanilla JavaScript (no frameworks or libraries), implement a 'Load More' button that fetches data from an endpoint on each click and appends the results to the page. Include loading state management, basic error handling, and optionally stop loading when the server signals there's no more data.

API & IntegrationsTechnical Trade-offsSystem Design

Author's notes

My first instinct was to reach for fetch inside an async function and I did that fine, but I fumbled the button disable logic.

Create a free account to read the full note

AI HintsAI Generated

Suggested Approach

Start by outlining the component structure: a button, a results container, and state variables for loading, error, and pagination. Then walk through the implementation step-by-step, emphasizing async/await, error handling, and disabling the button during fetch. Finally, discuss how to detect the end of data and clean up state.

Pro tip: Mention that you'd use a flag like `isLoading` to prevent duplicate requests and that you'd handle race conditions by ignoring stale responses if the user clicks rapidly.

1. Set up HTML and state

Create a button and a container for results. Initialize state variables: `isLoading`, `error`, `nextPage` (or cursor), and `hasMore`.

2. Implement fetch function

Write an async function that fetches data from the endpoint using the current page/cursor. Use try/catch to handle errors and update state accordingly.

3. Manage loading and error UI

Disable the button and show a loading indicator while fetching. On error, display an error message and re-enable the button for retry.

4. Append results and update pagination

On success, append new items to the container and update the page/cursor. If the server indicates no more data, hide the button or show a message.

5. Handle edge cases and cleanup

Prevent duplicate requests by checking `isLoading`. Consider aborting previous requests if needed. Ensure the button is re-enabled after completion.

Key Points to Mention

Use async/await with try/catch for clean error handling.
Disable the button during fetch to prevent multiple simultaneous requests.
Track pagination via page number or cursor, and update it from the response.
Check for a 'hasMore' flag or empty results to stop loading.
Display user-friendly error messages and allow retry.
Consider using AbortController to cancel stale requests if the user navigates away.

AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.