Client Cache

Each search submit makes a request to the Hacker News API. You might search for “redux”, followed by “react” and eventually “redux” again. In total it makes 3 requests. But you searched for “redux” twice and both times it took a whole asynchronous roundtrip to fetch the data. In a client-side cache, you would store each result. When a request to the API is made, it checks if a result is already there and uses the cache if it is. Otherwise, an API request is made to fetch the data.

To have a client cache for each result, you have to store multiple results rather than one result in your local component state. The results object will be a map with the search term as key and the result as value. Each result from the API will be saved by the search term (key).

At the moment, your result in the local state looks like this: