What can be used to refactor a large react components
What
What will you do with a few thousands lines of code react components? it is the main question I will write about today about my experience when I dealt with these monster in my development projects.
How
Investigate the components.
- Normally these large components are built through the time by many developers so it is not straight away to refactor the component into smaller ones. I usually start with understanding how many functionalities this component is performing.
Breakdown functionalities and categorize them
- To have a plan on where to start so it is good to have an overview of functionalities and how important those are. In a large component not all functionalities have the same priorities, such as keyboard navigation is often a bonus function.
- When you have a group of functionalities and you can list core functionalities then you can start working on a plan for refactoring.
Plan on refactoring
- It all depends on how much time you have for refactoring a component so you can have a appropriate plan. I usually see two approaches:
- keep the old implementation and start working on a new implementation and start using in a small place first.
- pick some functionalities or parts of the component to rewrite, extract.
Techniques
- HoC, High order component is very useful when you have a component that serves different logic with the same base. Then you can think of creating different components with the same base shared by HoC instead of adding everything in a large component.
- ReactContext, Context is an useful way to cut down props sending and organizing states in a central place.
- Hooks, Hooks can be used to implement same functionalities cross functions.
- Layout, base components help you to scaffold your components.
the original post is written here https://www.hittaducmai.se/blogs/what-can-be-used-to-refactor-a-large-react-components
