Reduce redundant RPC calls

[Seroxdesign]

Problem:

We are using Geb as a param in many useEffects which fetch data necessary for component to render, however geb changes very very often, which causes containers to re-render very often.

Solution:

Long term we need improve our data fetching by integrating something like ReactQuery: https://tanstack.com/query/v3 However right now we can use React.memo() https://react.dev/reference/react/memo to wrap it around all the UI components, to prevent them from re-rendering when their parent (Containers) re-render.

This should reduce unnecessary re-renders and provide a performance boost, as well as prevent some bugs.

Jacob's note: setSafeData in VaultDetails.tsx might be causing re-renders of the SVG given that the safe data is used throughout the app and we're fetching it whenever there are changes in safe, safeActions, geb, liquidationData, safeActions.setLiquidationData, account

[pi0neerpat]

• First place to investigate is to reduce the amount of times geb is re-initialized
• Next explore other areas to reduce useEffect recalling (focus on upstream before moving downstream)
• If no improvements can be made, start researching new solutions:
• https://tanstack.com/query/v3 https://www.npmjs.com/package/@tanstack/react-query
• https://redux-toolkit.js.org/rtk-query/overview