Using react-adopt to solve “render props callback hell” in React NextJS GraphQL App

Image for post
Image for post
Photo by James Lee on Unsplash

I am building a demo Indian Restaurant Billing App , after completing Advanced React course by Wes Bos.

In my first article i changed the menu to hamburger menu from the normal menu.
In the second article i had given details to upload images through cloudinary.
In the third, we learnt to send transactional email using gmail.

In the app, we are using Apollo Client in the frontend, to get data from the Prisma database. So, we are using Mutation and Query components. In one of the component, we faced the deadly “Render prop callback hell”, with three level of callback.

You can find the starting code for Bill.js here.

Image for post
Image for post
The three level of render props

Here User is a generic Query component.

Image for post
Image for post
User component

To solve this problem, we use a third-party tool known as react-adopt.

So, let’s npm install react-adopt and use it in our component. Here, we will create a Composed component and use the adopt.

In it we write the three different keys in our Object and the value will be equal to the Mutation/Query we are going to replace.

Image for post
Image for post
Composed

We will now see the benefit of react-adopt. First we will replace the User component with the Compose component and also change the top level render prop to use all the keys from adopt.

Image for post
Image for post
Replacing User component

Now, time to delete the toggle cart Mutation. Go ahead and delete both starting and ending of it.

Image for post
Image for post
Mutation deleted

Next, it’s time to delete the Query component.

Image for post
Image for post
Query component deleted

Now, if we go back to our frontend and check we will find everything works fine. But if we open the console, we will find three warnings.

Warning spoiler

To fix it we have to make child component in Composed component for every value.

Image for post
Image for post
Our updated Composed

This will solve our warning problem and we get a minimal and readable code, with upper level render-prop.

You can find the updated code for Bill.js here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store