React

Eventually, it might turn into a series, since there's a lot to cover. I have been working with React for around 2 years now and came to realize the community as a whole has not come to concensus about how to structure/architect React code. Everyone seems to have their opinion, but there's no silver bullet fit for everyone, here is my journey.

Humble beginnings

I started using React for a new relatively large project in 2020. I come from data science backgroud, ventured into backend by need, then to frontend (again by need). I did not care much about front end development until now, considering React's steeper learning curve I decided to start with Vue. Everything was smooth and easy, Vue, VueX, Nuxt you name it. In retrospective, what I really liked was that there was one way to do things. In your component you define your starting state (data), your computation logic (computed) and what to do when. Nice and simple.

Here comes React with it's magical hooks. Everything is mess all of sudden.

React: a LIBRARY for building UIs. Cool. The emphasis is on the word Library.

Typical front end needs:

• state management (MODEL)
• UI logic (VIEW)
• displaying stuff (VIEW)
• fetching data (CONTROLLER)
• business logic (CONTROLLER)

I took the liberty to add which part of MVC we're talking about. (Because we want to keep out code 'clean', remember separation of concerns)

In my opinion, React should only be used for the VIEW part, not less and definitely not more.

Redux is so yesterday

When I started out, everyone on the internet had enough of Redux, so we did not even consider it. Everyone was super hyped about functional components and hooks, and we went with the flow.

useEffect ffff yeah

When we got to building, everything went into React, and I really mean everything. useState at page level for state management, multiple useEffects for the same state change triggering each other, fetching data from our API, form validation, EVERYTHING. This very soon turned out to be impossible to manage. The biggest problem is how React encourages the use of hooks for everything, breaking the good old MVC model. Our business logic was all over the place, mixed up with UI logic and state management. It was a nightmare, something had to be done. I started researching the topic and this was the point I realized how divided the community actually is.

BloC pattern

I stumbled upon BloC pattern for separating business logic. It stand for Business Logic Component (coined by Google at around 2020) and is mainly used in Flutter. I was really exited, because it separates business logic and state management from React. It used RXJS for reactivity. The most painful part is connecting it to React, but I managed to do it by using one custom hook. It's problematic to use it with suspense and error boundary.

Recoil

Have not tried it yet, but looks promising. Especially atom families and suspense support.