React Component Getting To Big

Question

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!

Answer 1

Wow! I've never seen a single file that big in a react app. You see, having a file that big goes against one of the purposes of using react, in my perspective. The best way to get around this is by using a state management. Passing props up and down (prop drilling) is not ideal will complicate your code. I'd advise you implement some state manager like context or redux.

Answer 2

If your requirements are:

• stateless components
• components must share one single state (the container one)
• some components must be notified when some value in the single state change

You should use Redux. In a few words Redux:

1. Create a store (singleton that represent the state of your app/just a part of it, that is your choice) whose attributes can be modified from actions or your own component as long as he can dispatch to the store.
2. Can notify your component of a change in the store.
3. You choose how you organize the store. It can be composed of several reducers that you can compare to folder in a file system.

Go check what it is before using it because there is no consensus. Half of React use it (internet search long ago) and the other half prefer to use built in react solutions like the context to avoid passing data and function through "several layers" of components.