React stack modernization

[jpye-finch]

Our frontend is getting fairly complicated - and some parts outdated - given it's written with modern technologies. Some patterns are getting old and are not being learned by new developers. We need to actively continue refactoring the frontend to keep it modern and exciting for developers to use.

• Migrate class components to function components

Important for being able to use hooks in all of our views.

• Extract complex logic to hooks; familiarize using reusable hooks for the team to separate view and logic

• Redux

We have to rethink what we need Redux for. It adds complexity via the action/reducer pattern, which are in their current state difficult to track, especially as the dev tools handle so much data that it crashes. For data fetching, we already have Apollo which does caching, and it's hooks can be directly used in every component. Redux can be a good tool for storing some data; even then, it's recommended to use Redux Toolkit.

I advocate getting into a mindset to avoid state management at all times. Oftentimes what first feels like a new global state is needed, is achieved via the data fetching tool (Apollo/react-query) or URL parameters. If there is a usecase that cannot be solved with those, there are simpler tools like jotai instead of Redux.

• Rework workqueues

https://github.com/opencrvs/opencrvs-core/blob/develop/packages/client/src/views/OfficeHome/inProgress/InProgress.tsx

Problems:

• complex logic in the component itself (see transformRemoteDraftsContent)
• the workqueues share a lot of duplicated code

• the pattern how data flows into workqueues is complicated

  Solutions:

• share code with hooks between workqueues
• fetch data from the workqueues themselves with Apollo hooks
• cache the workqueues for offline with Apollo
  

• Upgrade React to 19

• Upgrade React Router to v6

[tareq89]

For central state management library, can Zustand be a candidate? It is catching up very fast and have hooks like familiar interface.

https://npm-compare.com/@reduxjs/toolkit,zustand,jotai,recoil,valtio/#timeRange=ALL

[Zangetsu101]

React Router v6

• Nested routes increasing composability
• Parallel data loading with nested routes
• Easier handling of search params with new hooks
• Better form handling using Web Standards API
• Suspense & error handling support and lots more: https://reactrouter.com/en/main/start/overview

The other thing about search/route params is that we should consider using some runtime validations(e.g. zod) and proper error handling for incorrect values

[Zangetsu101]

Another thing to consider is how we want to handle the offline data which is crucial for us. Is using a library sufficient for us? Are there any use cases that require a more custom solution perhaps?

[naftis]

For central state management library, can Zustand be a candidate? It is catching up very fast and have hooks like familiar interface.

npm-compare.com/@reduxjs/toolkit,zustand,jotai,recoil,valtio/#timeRange=ALL

Yep it's a good option if we need to build/refactor our centralized state management. Here is a interesting comparison about the differences in the state management tools from Jotai's website: https://jotai.org/docs/basics/comparison

Out of them all I think Recoil is something we should skip as it seems stale compared to zustand/jotai.

[naftis]

Another thing to consider is how we want to handle the offline data which is crucial for us. Is using a library sufficient for us? Are there any use cases that require a more custom solution perhaps?

Definitely..

Could we suffice with Apollo doing most of offline caching? If there's something special (like PIN) we need to add to localStorage we could listen to the changes using Jotai https://jotai.org/docs/utilities/storage or Zustand https://docs.pmnd.rs/zustand/integrations/persisting-store-data

This would require refactors like location tree being fetched from gateway