Fujicracy / fuji-v2

Cross-chain money market aggregator
https://fuji-v2-frontend.vercel.app
15 stars 10 forks source link

Frontend's performance #375

Open ferostabio opened 1 year ago

ferostabio commented 1 year ago

We need to reduce unnecessary re-renders.

Zustand

Transient updates

Taken from zustand's docs:

The subscribe function allows components to bind to a state portion without forcing a re-render on changes. It is best to combine it with useEffect for automatic unsubscribe on unmount. This can make a drastic performance impact, when you are allowed to mutate the view directly.

While the code is a bit more verbose, it might help us in some cases.

Shallow

shallow is a feature offered by zustand for the case when you want objects to be diffed shallowly.

useMemo

useMemo is "a React Hook that lets you cache the result of a calculation between re-renders.". Project was built with useEffect in mind. Period. useMemo and useCallback could help.