In this talk, we will take a novel and original look into some of the unexpected behaviors in a React codebase and the anti-patterns that cause them. We discovered them while building a new full-stack web development framework on top of React.
Killing Bugs With Kindness
AI Generated Video Summary
This Talk focuses on reducing bugs in a React codebase by understanding antipaths. It discusses the types of bugs identified and the guardrails implemented to prevent them. The importance of being cautious with hooks like useState and useRef is emphasized, along with the use of context for state storage. The refactoring example demonstrates how reducing useState and callbacks can improve code quality and efficiency in the framework.
1. Introduction to Reducing Bugs in React Codebase
Hello everyone. My name is Darshata and I'll be talking about how to reduce bugs in a React code base by understanding antipaths. 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: a component not updating upon a user event, a component updating partially upon a user event, and a component rendering unexpectedly. If we can take one thing away from this talk, it should be to be as paranoid as Sharvi was in the Always Sunny episode when using 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.
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.
2. Refactoring to Reduce useState
The code on the left has antipaddles. For example, there are four useStates and three callbacks. The code on the right is its refactored version, where we have eliminated the use of useState and reduced the number of callbacks. This refactoring has significantly decreased the ratio of useState per component in our framework.
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.
Comments