No Time Dad

A blog about web development written by a busy dad

React Interview Questions - HTTP Request Component

Create a component that makes an HTTP request to any website and displays the status code from the request. The request should be made when the component first loads. The component does not need to be styled, but the user experience of an http request should be considered.

You can use the internet for reference documentation, but do not search for an answer to the question itself.

Explanation

I’d consider this React interview question to be at the very top of the easy range, possibly even medium difficulty. There are more than a few things to consider. But, making http requests in components is a very common requirement that most React developers will encounter early in their careers.

As with most things in React, there are more than a few ways to accomplish this. I prefer React functional components these days, so that’s where I started with this solution. Making http requests is sometimes slow, and sometimes error prone. Both of these situations need to be handled by my implementation. I can add a few checks in the html to make sure that the user has a half decent experience when viewing the component.

The http request should fire when the component loads, so I can create the state object containing an isLoading field set to true by default. Later, when the http request completes, I’ll set the flag to false. When isLoading is true I’ll display “Waiting for http request to complete…” to the user. Setting and updating the state is handled by React’s useState hook.

As for the http request itself, I’ll use a native fetch to issue the http request when component first “mounts”. Since this is a functional component, there is no componentDidMount function and I’ll instead need to use React’s useEffect hook.

The fetch call returns a promise that I can resolve using .then syntax, handling any errors as I go. If the request is successful, I’ll update the state value for status and display the status. If it’s not successful, I’ll store the error in the state and display its message.

So, a lot of things to consider. I had to google the fetch syntax. I also had to google how to get useEffect to stop making the request over and over. I think both of these are reasonable things to search for when working through this problem, and I wouldn’t expect someone to know them exactly off the top of their head. They should at least know that they need to use fetch and useEffect but they don’t need to have the exact syntax memorized. That’s unrealistic.

The component I wrote for this React interview question is pretty raw. It could definitely be cleaned up, refined, and refactored. But keep in mind that this is an interview question and not production code. A good interviewer is looking to see what your understanding of these concepts is and how you think through a problem. Unfortunately, you won’t always get good interviewers, so be prepared to talk through potential improvements like moving the fetch call out into it’s own utilities file or clean up the if blocks in the html.