When replacing an API or code path with a new implementation you’ll likely ‘deprecate’ the old path, but how do you know when that old path is finally not in use? If your code is running on a server, you could use metrics or logs, but even with then, it can be challenging to capture the required context to pinpoint where deprecated code is still in use. If your code is on the frontend logs are not an option, and you’ll need to be more creative.

Case Study: Replacing Icons

I was recently in the exact situation described above. I had been working on a sweeping refactor of the icons in our application alongside Dora Chan, product designer, and Billy Vong, fellow frontend developer. The three of us were upgrading our buffet of icon implementations with a new system based on React components. With 600+ call sites and three deprecated forms of icons, we had our work cut out for ourselves.

The first style was icons defined as class names on elements. An example would be

<p><i class="icon icon-warning" /> Something dangerous</p>

These were simple to fix as we could find all instances with grep. The next form was our <InlineSvg /> component. Updating this component was simple. Again we could use find and replace to remove <InlineSvg > and add the new icon component.

#tutorial #integration #api #application #react #case study #deprecation #button #code error