ChatGPT rubber duck debugging

I?am often asked about how we use GenAI to make us more productive as developers at 67 Bricks .? It is sometimes difficult to think of specific examples, as often they are minor benefits which don’t seem much in isolation but add up over time.? Today I was debugging a React page, which featured a country selector.? For some reason (WHY?) it was only sending the first country I selected for processing.?

Rubber duck debugging is an approach which has often proved successful for me; the act of explaining what the code does to someone else can sometimes make its shortcomings painfully obvious!

I was about to hop on a huddle, when I thought it might be useful for GPT-4 to explain the code to me instead. ? As I was using cursor, a VSCode fork with AI smarts, I opened the file for the malfunctioning page and asked:

“Can you explain how the list of countries to process is identified by this code?”

GPT-4 duly responded:

"Sure, the list of countries to process is identified by the function getAllCountriesFromSelectedGeographies(). This function iterates over the selectedGeographies state, which is an array of selected geographic regions.

• For each selected geography, it finds the corresponding node in the regionTreeNodes array (which is passed as a prop to the component). This node represents a region in a hierarchical tree structure, where each node can have child nodes.
• If a matching node for the selected geography is found, it calls the recursivelyFindCountries() function with this node. This function traverses the tree structure starting from the given node and collects all the leaf nodes (i.e., nodes without children), which represent countries. It does this by checking if a node has children. If it doesn't, it's a country and is added to the list. If it does have children, the function is called recursively on each child.

The getAllCountriesFromSelectedGeographies() function returns the list of countries for the first matching geography it finds. If no matching geography is found, it returns an empty array.

Here is the relevant code:"

function getAllCountriesFromSelectedGeographies() {
   for (const geo of selectedGeographies) {
     const matchingRegionNode = regionTreeNodes.find(
       (node) => node.name === geo.value,
     );

     if (matchingRegionNode) {
       return recursivelyFindCountries(matchingRegionNode);
     }

     return [];
   }
 }
        

?? I’m exiting early from the for loop! ??

“Can you change this so that it processes all the selected geographies?”

function getAllCountriesFromSelectedGeographies() {
const allCountries = [];

for (const geo of selectedGeos) {

  const matchingRegionNode = regionTreeNodes.find(
    (node) => node.name === geo.value,
  );

  if (matchingRegionNode) {
    allCountries.push(...recursivelyFindCountries(matchingRegionNode, regionTreeNodes));
  }
}

return allCountries;        

Sometimes all you need is a fresh perspective. GPT-4 was able to explain the code to me, which made me realise my mistake, and then for bonus points they fixed it for me.