Reducing bugs in a React codebase

A3 lets users build websites with a visual editor or React on the front end and Python on the backend. Because one page can contain many interactions, a code issue in one interaction can affect the wider application. Chaturvedi describes three recurring problems: components that fail to update, update only partly, or render unexpectedly.

Chaturvedi’s team first debugged recurring issues with print statements and React and browser DevTools, but found that approach too slow for rapid feature development. Their guiding principle is to make code independent of component render order and timing. When code dependencies are unclear, hooks such as `useState` and `useRef` without dependency arrays deserve extra scrutiny.

In an article viewer example, selecting an article should update its text, calculate a character count from its title and body, then fetch an emoji based on that count. Initializing state from props with `useState` leaves the count stale, so the request does not run. Giving the component an article ID as its key forces it to be destroyed and recreated, which updates the results but causes flicker.

Using `useEffect` with props as a dependency fixes the stale count without flicker, but causes an extra render after each prop change. Chaturvedi’s preferred approach is to compute the count with `useMemo`, which avoids that extra render. After refactoring, the framework averaged 0.35 `useState` calls per component across 112 custom hooks and 192 components.

A slider refactor replaces four `useState` calls and three callbacks with no `useState` calls and one callback, using the callback’s local context to track interaction and making the component controlled. Chaturvedi says controlled components can be preferable when a page has many interactions. She also cautions that nested components can duplicate state and make changes harder to trace, so each piece of state should have a single source of truth.