How understanding the reconciliation algorithm in React helped me improve my code quality

Introduction

Last week, I was working on a new feature for the project I am currently involved in, and understanding the React reconciliation algorithm not only helped me avoid major headaches but also improved the quality of my code. The issue at hand was related to a form that should receive initial values via props. These values would be passed to a custom form control hook, allowing them to be modified by the user. Initially, the process worked smoothly in the system's execution.

The problem

The problem arose when the PUT operation, responsible for altering the data, was successful, and the data outside the component was modified. However, to React, it appeared that nothing had changed in the form node. As a result, React didn't trigger a new render cycle for that component, and the value inside the custom hook remained unchanged. While the user saw the updated value in the list, the old value persisted in the form.

How the React reconciliation algorithm works

I'll provide a brief description of how the reconciliation algorithm works, but you can dive deeper into the official documentation through this link: Preserving and Resetting State. Essentially, in each render cycle, React compares the virtual DOM with the browser's DOM, generates a list of necessary changes, and commits those changes, resulting in a new view in the browser. The virtual DOM and the DOM are structured as trees, enabling React to change only what is necessary. If a parent node in the tree has changed, its children won't necessarily be affected.

A key and interesting concept of this article is that these nodes are identified by the "key" prop of each component. Once we understand that React manages the state independently based on the position of components in the tree, we recognize the ability to manage the state of our component through reconciliation.

You probably don't need a useEffect

During the development of this new feature and while dealing with the aforementioned problem, I was momentarily led to address this flow with a side effect controller, known in React as the useEffect hook. However, this hook should generally be used sparingly, as it disrupts the predictability of the algorithm's execution and can introduce bugs. To strengthen my argument, I refer you to the official React documentation explaining why you probably don't need useEffect in many of your day-to-day scenarios: You Might Not Need an Effect.

Solving the problem

Ultimately, the solution that brought higher quality to my software was surprisingly simple, despite being an advanced topic in React. With the problem identified, I tied the "key" prop of the component that held the form to the parent component's variables. These variables would then dictate when the form state should or should not be reset. The resulting code looks like the example below:

<ComponentA
    key={variableValue}
    {...otherProps}
/>

Conclusion

In conclusion, understanding the React reconciliation algorithm has been instrumental in enhancing my code quality. By comprehending how React manages state and updates components, I could efficiently address form state issues and deliver a better user experience. Happy coding!