I believe that the use of LLMs like ChatGPT has the ability to augment our productivity and intelligence as developers.
It can give false information. A couple particular experiences of it giving false information stand out to me:
- Knowing the walrus operator was newly supported in Python3.8, I asked ChatGPT how to use it. Its response was that the walrus operator was not supported in Python. But after I stated that the walrus operator was supported as of Python3.8, it gave me an example of how to use it and its usage rules.
- I once asked ChatGPT for help with creating an error boundary component for a project written in React. The project was written in functional React, and so ChatGPT confidently told me how to create a functional error boundary component. As it turns out, React only currently supports class-based error boundary components. After I asked ChatGPT where specifically in the documentation it was finding information about how to create functional error boundary components, it apologized for its error and explained that only class-based components were currently supported.
But despite the frequency with which it gives false information, it can help with a number of things we need to do as developers. In lieu of a mentor, instructors, or senior developers or managers, it can be very helpful at giving advice on how to improve and refactor your code.
In a side project I worked on this Summer (and that started as a school project), I asked ChatGPT for ideas about how to refactor my code. The project was a full-stack application that used OpenAI’s API to generate vacation itinerary recommendations. The application’s largest component was the form where the user entered their destination, travel days, and number of travelers. I gave ChatGPT my entire component and asked it if it had any recommendations for how to improve it. This was its response:
ChatGPT:
Your VacationForm component is quite large and handles multiple responsibilities. Here are some suggestions to improve it:
1. Component Decomposition: Break down the component into smaller, more focused sub-components. For example, you can create separate components for the form fields, recommendations, and buttons.
2. State Management: Consider using a reducer to manage the form state. This can make it easier to handle complex state logic.
3. Error Handling: You’re using window.alert for error messages. Consider a more user-friendly way to display errors, perhaps a modal or a toast notification.
4. Loading State: You’re using a ternary operator to switch between the loading state and the form. Consider using conditional rendering for better readability.
5. Code Duplication: Functions like fetchRecs, handleRecsResp, and getMoreRecs have similar structures. You could abstract out the common logic.
6. Async/Await: When using async/await, it’s good to wrap the code in a try/catch block to handle errors gracefully.
7. Local Storage: You’re directly interacting with localStorage in multiple places. Consider abstracting this into utility functions.
8. CSS Classes: You have inline styles and direct string literals for classes. Consider using a CSS-in-JS library or at least moving the styles to a separate CSS file.
9. Tooltip Text: You’re importing all tooltip texts even if you’re not using all of them. Consider importing only what you need.
10. Comments: Adding comments to explain the purpose of each function and major code blocks can improve readability.
Obviously there was a lot of opportunity for improvement that I didn’t see myself! I didn’t incorporate all of the feedback, but I did work to:
- Break the component down into smaller subcomponents (ChatGPT’s Component Decomposition recommendation)
- Refactor the functionality that was duplicated into reusable functions (ChatGPT’s Code Duplication)
- Remove inline CSS styling by creating reusable component with base CSS classes that could be augmented by passing props to the component (ChatGPT’s CSS Classes recommendation)
- Use binary conditional rendering instead of ternary conditional rendering (ChatGPT’s Loading State recommendation)
I especially appreciated the last point about binary conditional rendering, which is much more readable because the logic is more compact. For example:
{displayTitle ? <h1>My Title</h1> : <p>This is what is displayed if displayTitle is false</p>}becomes
{displayTitle && <h1>My Title</h1>}
{!displayTitle && <p>This is what is displayed if displayTitle is false</p>}For components where only one element is displayed in either case, the impact isn’t as high, but if the logic spans many lines, it can be much more difficult to determine which variable determines which elements will be displayed.
A lot of the criticisms of ChatGPT I’ve read involve its tendency to produce false information or low quality information. I believe that copying and pasting its output is not very useful. But understanding whether or not the information it gives you is accurate, fully understanding it, and using it thoughtfully can produce great results. It can make your existing code better more quickly than you may be able to do on your own. I don’t believe it’s a replacement for the feedback of senior colleagues or mentors, but it can certainly act in that role if you prompt it to.
If you’d like to see the VacationForm component before and after, you can check it out at the following links:
Before: GitHub
After: GitHub (Less than half as many lines of code!)
Leave a Reply