setUrl parameter to change the url on the fly

[martunta]

In my project, I need to change the image dynamically, not just statically set it at the initialization of the component. For that, I added setUrl parameter that can be used in useEffect calls across the component.

Probably the same problem can be solved by composition, but this felt cleaner.

[lavrton]

Thanks for your suggestion, but I don't think it should be a part of the lib. It is too simple to implement it by using the lib.

function AnotherApp() {
  const [url, setUrl] = React.useState(initialURL);
  const [image, status] = useImage(url);
  React.useEffect(function(){
    // at some condition
    setUrl(anotherUrl);
  }, [setUrl]);

  return (
    <Image image={image} />
  );
}

Or you can just write your own hook:

const useSetImage = (initialURL) => {
   const [url, setUrl] = React.useState(initialURL);
   const [image, status] = useImage(url);
   return [image, status, setUrl];
}

function AnotherApp() {
  const [image, status, setUrl] = useSetImage(initialURL);

  React.useEffect(function(){
    // at some condition
    setUrl(anotherUrl);
  }, [setUrl]);

  return (
    <Image image={image} />
  );
}

[martunta]

oh, I thought that initial value is set only during first render. https://reactjs.org/docs/hooks-rules.html. and now I realize that this might only apply to useState. will try it out, thanks.