why image request fire again and again in react js?

Question

I make a demo application using final-form , but I am facing a issue , when I toggle my button (toggle button) image request fired again and again.

Step to reproduce this

1 ) On/off the Toggle button.see network request (DISABLE CACHE SHOULD BE CHECKED ) .

https://codesandbox.io/s/snowy-browser-sfpnz

const Abc = React.memo(() => {
  return (
    <ImageContainer>
      <Image id="titleLogo" src={src} />
      <TitleText>{title}</TitleText>
    </ImageContainer>
  );
});
const ShowImage = useCallback(() => {
  return <Abc />;
}, []);

Answer 1

Take the styled-component calls out of 'AppWithIconToggle' function body. Give the title and src as props to Abc component and memo it, so it won't rerender when they are unchanged.

const Abc = React.memo(({ title, src }) => {
  console.log("render", title, src);
  return (
    <ImageContainer>
      <Image id="titleLogo" src={src} />
      <TitleText>{title}</TitleText>
    </ImageContainer>
  );
});

https://codesandbox.io/s/hopeful-snowflake-h13uc