Master The Asynchronous State In A Functional React Component

You must unlearn what you have learned.

Functional programming lets you write concise apps. But things work differently than they do in imperative programs. Variables, loops, and async/await — these practices lead to an imperative app. If you aim to tap the benefits of functional programming, you must unlearn what you have learned.

This post explains how you functionally master asynchronous API calls with React.

React is a great library to develop web-applications with. It lets you structure your code into concise functional components.

What a functional component does, depends only on the properties you pass into it. The component does not depend on some outside state that is cumbersome to keep track of.

For instance, the following component asks the user for the current time at a certain place.

It takes a property (location) as input. It processes the input (putting it into a text). It outputs the result (it renders the text to HTML).

Given the same input properties, the component produces the same result. You don’t have to care about the global state of your app. Because the result does not depend on a global state.

Writing a functional component is easy. At least if the problem at hand is that simple. But what if we needed to solve a more complex problem? What if we wanted the component not only to ask the question? But also to answer it?

If you read some of my other posts, like “Do you want to become a full-stack developer?” or “What time is it”, you’ll know that I like to play around with Date-objects. But why don’t we use an asynchronous web-service to make it a little more fun, this time?