How to refresh a photo link reference when a component mounts in React?

Question

I have a component like so:

export function SomeComponent(props) {
  const { id } = props;

  const photo = `http://someurl.com/photo/${id}/`;

  return (
    <View>
      <Avatar
        rounded
        source={photo}
      />
    </View>
  );
}

I have a photo update endpoint which updates the photo that is stored in http://someurl.com/photo/${id}/.

The issue is after the update and I visit the route where this component is shown, it's still showing the old photo. Only if I refresh the page, will the photo get updated.

Is there a way to force reload the content of the link? Or do I need to force reload the route that contains the component?

score 1 · Accepted Answer · answered Jan 12 '20 at 15:10

1

the page re-renders when the states or props are updated, you can manually trigger re-render by setting up a state or prop and changing its value.

one scenario:

ParentComponent() {
  const [trigger, setTrigger] = useState(false);

  const onUpdate = () => {
   setTrigger(false);  
 }
return (
 ..... your code 
 <SomeComponent trigger={trigger} />  // trigger is passed as prop so as its value changes component re-renders
  ) 
}

answered Jan 12 '20 at 15:10

Fahad Mahmood

159
1
10

The page rerenders because other data are updated to the latest, but the photo link doesn't because it's storing the cached photo. – catandmouse Jan 12 '20 at 16:16
Avoid image cache if that is the case: – Fahad Mahmood Jan 12 '20 at 17:43
1

You need to add random query string with the url like this: ```````` As provided in the answer: https://stackoverflow.com/questions/728616/disable-cache-for-some-images – Fahad Mahmood Jan 12 '20 at 17:44

How to refresh a photo link reference when a component mounts in React?

1 Answers1