Conversation
…data Refactor MediaPickerModal to derive its image library using useMemo from products, collections, and settings props. This eliminates the extra render cycles previously caused by local data fetching and state updates (useEffect + setIsLoading + setLibrary). The refactor also includes: - Memoization of normalized image URLs to avoid repeated calls to the potentially slow normalizeImageUrl utility. - Removal of redundant internal state variables (library, isLoading, error). - Simplification of the component's useEffect hook. - Lazy loading for images in the media grid to further enhance performance. This change follows React performance best practices by treating the media library as derived data rather than a separate state, leading to a more efficient and predictable rendering cycle. Co-authored-by: AJFrio <20246916+AJFrio@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
1 participant
The
MediaPickerModalcomponent was previously fetching data for its media library internally when opened, using auseEffecthook to trigger three separate API calls and multiple state updates (setIsLoading,setLibrary). This caused at least three render cycles before any data was shown.This optimization refactors the component to accept
products,collections, andsettingsas props. It usesuseMemoto derive thelibraryarray from these props. This approach ensures that the library data is always in sync with the parent state and eliminates the extra render cycles previously required to populate the library.Furthermore, because the
normalizeImageUrlutility can be slow (especially for Google Drive URLs), the normalized URLs are now computed and stored alongside the original URLs within theuseMemoblock. This prevents redundant normalization during list rendering and scrolling.Key changes:
products,collections,settings,isLoading, anderroras props.library,isLoading, anderrorstate.loadLibraryfetching logic.useMemofor derived library data with pre-normalized URLs.loading="lazy"to library images to improve initial load performance.PR created automatically by Jules for task 12557406257922257017 started by @AJFrio