This site runs best with JavaScript enabled.

Deprecating React Components

Dan Andersson

October 07, 2019

When maintaining a medium too large website, you will sooner or later want to replace and rebuild some parts of the site. For example, it is not unusual to redesign the entire website. This is not usually a problem, but if you want to do partial releases of the redesign and you have spread reusable parts all over the site, it can be.

Problems like name collisions can occur and you may have to come up with new ones for components with similar functionality but different designs. This may lead to that you have to spend time to find the correct component to use and in the worst case, you may use the wrong one. It will also probably be confusing for new members on the team.

To solve this problem you want to be able to have multiple versions of the same component. You also want it to be clear if a component is deprecated and should be replaced.

One solution is to use something like Bit which solves this problem and also makes it easier to reuse and share components. If you think it is to much work or too complex to integrate something like that, there is a simpler solution, project structure.

You create a folder in your project which holds deprecated components and you give the folder an easy to spot name like __DEPRECATRED__. This way you can have components with the same name and it will show up in search if the component is deprecated or not. If you are using a style guide like Styleguidist you can also highlight deprecated components in the documentation. This is of course not a rock-solid solution but if you want a simple solution it may be enough.

If you want to be sure to remember to remove deprecated components you can also create a custom eslint rule that checks for usage of deprecated components.

Share article

Dan Andersson © 2020