Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Image): keep function identiy accross renders #2638

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

Gregoirevda
Copy link

@Gregoirevda Gregoirevda commented Feb 2, 2024

Description

Currently when an inline function is passed to the Image or Animated.Image component, the useEffect will be triggered on every render, causing the image the be fetched on every render.

props accepting a function and declared in the dependency array are: onLoad onLoadEnd onLoadStart onLoadError.
It shouldn't be up to the developer to pass a memoized function.

The browser will cache subsequent image fetches (not sure about all platforms), so as it may seem acceptable setting the cache key to reload will fetch the image on every render.

Example

function App() {
  const Component = Image || Animated.Image;
 
  // Not memoized, causing the fetch on every render
  function bad() {}
  
  const good = useCallback(() => {}, [])

  return <Component source={{uri}} onLoadEnd={bad} onLoad={() => { /* equally bad */ }} onLoadStart={good)  />
}

Copy link

codesandbox-ci bot commented Feb 2, 2024

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9e05b48:

Sandbox Source
react-native-web-examples Configuration

@Gregoirevda Gregoirevda changed the title fix(web): keep function identiy accross renders fix(Image): keep function identiy accross renders Feb 2, 2024
@Gregoirevda
Copy link
Author

@necolas Does the fix make sense? I didn't know where to put the utility method so added in vendor to get feedback, but tell me where the right place is please

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant