Cover photo

zoink + lookbook + day 3

jornal

Today's motivation

speed going ham on the xiaolongbao feed reminded me there is a speed / performance issue in zoink that must be addressed!!

asking cursor the important questions now..

Likely Performance Issues (according to Gemini)

no data caching between page navigations
multiple API calls in sequence (waterfall)
no loading state management during transitions
no data prefetching

however, the real problem with the noticeable lag/delay navigating to a different page was none of the above issues; it was more to do with React and the mounting/unmounting that is being done as state changes in the child component and I am returning a different DOM sub-tree from there

asking more real questions - Link tag, why???

Link nav lag solution (along with tanstack useSuspenseQuery)

learning about React rendering behaviour - what we want is suspended components with a fallback specified by parent component

Suspense + useSuspenseQuery = nav delay problem solved

ok but let's go EVEN FASTER

Some additional optimizations that Cursor did

Eager Data Loading (moved prefetching to root layout for earlier loading)
Smooth Transitions (framer-motion)

SwiftUI

safeAreaInsets mentioned

Root Page Nightmares

navigating to other pages fine but root page still lags like crazy

things i tried

dynamic import components using fdk
wrapping a whole component in Suspense instead of just a part of the component's DOM
fiddling with the useEffect in FrameProvider that loads the context

the thing that was causing the issue for me was using the exported useFrame hook in components that needed Farcaster context data

I'm not entirely sure where or how to use this useFrame hook if it is to be exported like this

every time I would use this useFrame hook in a component, it would create all these additional states but I'm not sure if that's the intended behaviour or usage of this hook?

useFrame solution - useFrameContext

this way, we're just keeping one instance of the frame context state and using the useFrameContext in any component that needs the data; this will not trigger the useEffects in the useFrame hook

example usage - would use it like useFrame but instead of re-invoking the full setup like before, it uses shared state

so, the question is, is there an anti-pattern in the Farcaster Mini App quick start CLI command a.k.a npm create @farcaster/mini-app ???

p.s. the zoink repo was created using the neynar quick start CLI command tbf; @neynar/create-farcaster-mini-app

day 3 trello board