React useCallback Lesson — Reference Chaining Issue

Photo by Aida L on Unsplash

Imagine you are building a web app to render images from Lorem Picsum and users can navigate to the next and previous images by clicking the navigation buttons. The web app will only render 1 image at a time and a text to show the author of the image itself. On top of that, there are a couple of requirements to build this app:

1. There will be a constraint of X maximum images that users can see. The app shouldn’t render more than X different images.
2. The app should only fetch the image detail information, e.g. author, when the image is fully loaded. This is to confirm that the image URL is valid before fetching any additional data.
3. There will be some callback functions that will be called once the image and author information is fetched.

So far the requirements are quite straightforward, right? Let’s jump into the code.

Before we start coding, for the sake of learning, let’s not focus on why the example app is implemented in a certain way, but more on what will be the result if we implement it that way and what can we learn from it.

Let’s start with creating the App component that stores the state of the shown image by its id. In this example, we will define the minimum and maximum image ids as 1000 and 1010. Here, we will render…