---
# System prepended metadata

title: Refactoring Control center

---

# Refactoring Control center

We have two main opportunities with regards to improving performance for our codebase.

## 1. Data Fetching & posting
Currently we are using redux stores a lot for getting and submitting data to our database. This has become a bottleneck. We need to handle this large amount of data more efficiently.
Currently redux being used so that the data is accesible to multiple components as our flows are quite complex. 
However, we suggest that we use `React-query` package to handle data requests. It is a package built specifically for data fetching and we stand to gain a lot of performance if we replace redux with this.
We are not suggesting to replace redux completely, but only where data fetching and posting is concerned.

[More on React query](https://tanstack.com/query/latest)

## 2. Refactoring UI components to be functional (using hooks)
The second bottleneck we see are the UI components that have been written quite long ago, and have not been maintained or documented properly (no comments in the code).
The current components use mostly class components. We suggest moving them to functional components with hooks, as they offer a way of writing code that is more re-usable. Therefore, we will reduce the amount of code written to render the components, therby improving build times and runtime performance.
We also suggest creating a solid documentation for the UI components that we will create using `storybook` utility.
[More on Storybook](https://storybook.js.org/)
> This would take up some time, but may prove its worth down the line, when we have more devs work on it later in the project.

### Refactoring styles
Currently the styles are written in scss, however no post processing is done, i.e, not correctly bundled and not removing dead styles.
We reccomend using `tailwind css` as we are refactoring our UI components also as a quick and permanent fix as we wont need to worry about post processing(bundling) css during builds.