Architecting a React App in 2021
We use React for UI rendering and Redux global state management together with Flux pattern. Before you put your app into Redux rabbit hole consider whether you actually need Redux. This is a very higher-level view of a frontend component architecture. We should shape architecture to promote code readability, maintainability, debuggability, testability, and better separation of concerns.
This is where most of the business logic happens. Container components “contain” presentational components. Container components are responsible for…
Container components are not reusable but we can break them into reusable smaller units like custom hooks which I will discuss later.
Custom Hooks allow us to extract component logic into reusable functions. It’s not something specific for data fetching but let’s focus on our use case for now. Instead of building our own hooks from the scratch, I opt to use the SWR library which addresses the problems above plus a bit more. There are alternatives like React Query too.
Since we use custom hooks for data we only have few use cases to use the redux store. as I said earlier we might be better off without redux.
