How it started

I got my hands on GitHub Copilot a month ago, I was already amazed by Copilot crushing Leetcode problems in seconds. The very fact that it is trained upon billions of lines of public code is fascinating. 👀

Yes, it’s all cool and stuff, but can it solve the day-to-day problems I face as a Frontend Engineer?

So I took it for a spin!

My Initial Setup

I had a Next.js (also React, if you don’t know) scaffold ready which I used during my Interview stints. So I started with the setup. Github link here

End Goal

I was expecting to end up with a UI like this:

• 3 images stacked in each row
• Ability to load more images (from paginated API) when I hit the bottom of the viewport
• Maintain the state (loaded images) using the useState hook

This is how it went

1. Warmup — Tile component

I began writing comments to create a simple Tile component.

• Tile takes URL as a prop
• Renders image with the URL
• Has some classes for basic styling

Sweet! It looked accurate to me at the first glance. I went ahead with it. CSS classes were added to the div instead of the image, which I corrected manually. Also added a CSS grid tailwind class on the div for the future.

2. Feed component

I got a little creative at this point 😝. Instructed copilot to do the following:

• Create a component that looks like an Instagram feed 🤣
• it accepts a list of images as a prop
• it renders a list of Tile components
• each Tile component has a URL prop

By the way, Copilot was kind enough to predict the comments as well 😉

Seems like I was expecting too much 😅. It surely didn’t add the right CSS classes for a 3-column split layout. But notice how it was able to loop through images that came in as an array and rendered our Tile component correctly as we were expecting.

Accepted this solution after minor tweaks to CSS classes:

3. The Final component!

Guess, this is what you’re here for! Can it predict the logic for Infinite Scroll? Can it accurately fetch from a paginated API?

Let’s find out! Provided the following context this time around:

• Create a Home component with Infinite Scroll
• It fetches images from the API_URL and stores them in state
• It renders a Feed component with the images

By this time, it started predicting the next comments, this is what it came up with:

3…2…1…Here we go!

I’m impressed! It surely did not generate the logic for Infinite Scroll, but the rest of the things like useState for images and useEffect for API calling look solid at the first glance. So I accepted this result (with a few caveats that I would discuss later).

At this point, I saved the file to check the output, I also removed Loading & Error components for now and also did a minor API-specific tweak.

It rendered the images kinda as we wanted. Only the pagination and infinite scroll were missing.

In another attempt to fix the problems, Gave the following hints:

• Added a Button with ref to be observed
• Specifically wrote IntersectionObserver API in the context
• Added page in the state, to hint the pagination

It finally handled for pagination just the way we wanted, Also notice on the line:59, how it tried to handle concatenation to the previous dataset on subsequent API calls. But we’re still not there yet!

Final Attempt with the following context (which it also tried predicting):

• Create a function that uses IntersectionObserver to observe the btn ref
• It detects when the button is in the viewport
• It calls the loadMore function when it is in the viewport

Yes, this is what was the missing piece in our puzzle. A method that observes the button when it is visible in the viewport to initiate the next API call.

Some last tweaks to get it running:

Added a useEffect (also predicted by Copilot) to call the generated function, passing in btn and page as side effects to the dependency array. Manually added a cleanup to unobserve on component unmount.

End result

Full video of the entire process-

The very fact that we’re getting all this free is amazing. It’s still not there yet, but it’s constantly improving. It can be a great utility to handle mundane tasks so that we as a developer can spend more time doing quality work. Can’t wait to use it for day-to-day tasks at work 😜. What if it takes over our jobs? Let me know your thoughts in the comments!

Also, can it center a div? Yes!

More content at plainenglish.io