vendredi 24 janvier 2020

React Component Getting To Big

I am starting to notice a potential problem with the way I am structuring my React application.

I like to architect my components by having one file that acts as a container and multiple stateless components that get passed data and event emitters via props. This container will contain all the state, API Calls, and event handlers. This container will render child components that are stateless.

Here is an example of a structure I use:

- folder
  - index.js <-- container file
  - childComponent1.js
  - childComponent2.js
  - childComponent3.js
  - childComponent4.js
  ...

The size of container file and the number of child components depends on how big a feature is. The problem I had recently was that there was a very big feature that I had to implement, and while I like to use this structure, I started to realize that my container file got very big, like almost 1000 lines of code big. Now, I'm not sure if this is an issue, but seeing 1000 lines of code in one file concerns me. There is just a lot of state to keep track as well as event handlers to read/set new state.

I'm wondering if there are tips on any workaround on this or if there is a different design pattern that I can try and experiment with. Any answer is acceptable!

Thank you!

Aucun commentaire:

Enregistrer un commentaire