Killing Bugs With Kindness

Hello everyone. My name is Darshata and I'll be talking about how to reduce bugs in a React code base by understanding antipaths.

A little bit about me I am the maintainer of the open source project Atri Engine which is a new full-stack web development framework. I'm also the co-founder and CEO of Atri Labs which is the company behind this project. So using Atri framework the front end of a website can be created by writing React code and its package in NodeJs, Python etc. There are many productivity tools baked into it such as a visual editor that can be used to create the front end of a website to complement your React code. This is how that visual editor looks like. As you can see there are numerous interactions on one page. For example, we can add components, style them and move them around. We can also see how responsive our website is by clicking on different screen sizes.

So while creating this framework, for our team, it was very important to understand and characterize antipatterns in our large React codebase, because sub-optimal code in one interaction can affect the entire application. Moreover, the objective for our framework is to support building production-grade websites. Consequently, building internal standards that are rigorous around code quality were very important to us. So in this talk, I will share the types of bugs we have identified in our codebase and the guardrails we have built to avoid them in the future. I will cover how to prevent three types of unexpected code behaviors. First, a component does not update upon a user event. Second, the component updates partially upon a user event, since the previous state is still there. And thirdly, the component renders unexpectedly. Initially, while building our framework, we were encountering these bugs repeatedly. So our first resort was to use random print statements like a true developer. But of course, later on, we had to create some method around it. So we used one central theme to codify hints that are easy to remember and can lead us to identify antipaths. And that theme comes from React's official documentation, which states that a React code should be independent of the sequence in which components will render and when they will render. The first hint is if we are using hooks without a dependency array. We think that one way to visualize a React code is as a collection of interdependent pieces of code. Hence, if a code's dependency relationship cannot be established, then there is a high likelihood that it will result in bugs. So if we can just take one thing away from this talk, it should be this. Be as paranoid as Sharvi was in this iconic Always Sunny episode when you see or write hooks such as useState, useRef, etc., that do not take dependency arrays. Another way to avoid unnecessary useState is by using the context of the Event Handler to store State. Here I am demonstrating this using the custom slider component.

The code on the left has antipaddles. For example, there are four useStates and three callbacks. The startPosition The startPosition state records the initial position of cursor. The code on the right is its refactored version. Note that we do not have any useState and only one callback because we have used the local context of the callback to store all the ongoing information related to user interactions. When we applied this refactoring to our framework, we were able to drastically reduce the number of, sorry, the ratio of useState per component. Our current ratio of number of useStates to total number of custom hooks and components stands at around 1 is to 3.