Images disappear when scrolling

[egarrett94]

The issue

When the markdown is rendered within a ScrollView, images within the markdown disappear as it scrolls. In versions prior to these changes, the images render consistently.

The reason

It looks like the commit made on November 6, 2019 where the deprecated lifecycle methods are removed is the culprit, but I'm not sure where the bug occurs. Any ideas?

[nickarora]

I've investigated this; this is caused because when shouldComponentUpdate was removed, the shallow comparison of incoming props was removed. Consequently, if you use <Markdown {...} /> within a ScrollView, it will unnecessarily re-render the markdown each time the scroll position changes. if an image is being fetched from a url, the constant re-rendering leads to the glitch -- because FitImage needs time to figure out it's height and width. (it defaults to height 0 if the info is unavailable)

This can be fixed by reintroducing "shouldComponentUpdate" in the form of React.memo

[iamacup]

Hey there, thanks for debugging this - i am struggling to replicate the render thrashing inside of the library with this code below.

@nickarora do you have a code snip that does?

const copy = `
# Title

I've investigated this; this is caused because when shouldComponentUpdate was removed, the shallow comparison of incoming props was removed. Consequently, if you use <Markdown {...} /> within a ScrollView, it will unnecessarily re-render the markdown each time the scroll position changes. if an image is being fetched from a url, the constant re-rendering leads to the glitch -- because FitImage needs time to figure out it's height and width. (it defaults to height 0 if the info is unavailable)

I've investigated this; this is caused because when shouldComponentUpdate was removed, the shallow comparison of incoming props was removed. Consequently, if you use <Markdown {...} /> within a ScrollView, it will unnecessarily re-render the markdown each time the scroll position changes. if an image is being fetched from a url, the constant re-rendering leads to the glitch -- because FitImage needs time to figure out it's height and width. (it defaults to height 0 if the info is unavailable)

I've investigated this; this is caused because when shouldComponentUpdate was removed, the shallow comparison of incoming props was removed. Consequently, if you use <Markdown {...} /> within a ScrollView, it will unnecessarily re-render the markdown each time the scroll position changes. if an image is being fetched from a url, the constant re-rendering leads to the glitch -- because FitImage needs time to figure out it's height and width. (it defaults to height 0 if the info is unavailable)

I've investigated this; this is caused because when shouldComponentUpdate was removed, the shallow comparison of incoming props was removed. Consequently, if you use <Markdown {...} /> within a ScrollView, it will unnecessarily re-render the markdown each time the scroll position changes. if an image is being fetched from a url, the constant re-rendering leads to the glitch -- because FitImage needs time to figure out it's height and width. (it defaults to height 0 if the info is unavailable)

I've investigated this; this is caused because when shouldComponentUpdate was removed, the shallow comparison of incoming props was removed. Consequently, if you use <Markdown {...} /> within a ScrollView, it will unnecessarily re-render the markdown each time the scroll position changes. if an image is being fetched from a url, the constant re-rendering leads to the glitch -- because FitImage needs time to figure out it's height and width. (it defaults to height 0 if the info is unavailable)

![img](https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1280px-Image_created_with_a_mobile_phone.png)

`;


const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          style={{height: '100%'}}
        >
          
           <Markdown style={styles}>{copy}</Markdown>
          
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

[nickarora]

In your example, you are unable to reproduce the bug because nothing causes your app to re-render the markdown component with the same props.

I misspoke earlier, its not ScrollViews that triggers the bug, its any situation in which an app re-renders frequently and passes the same props over and over to Markdown. ScrollView with an onScroll event is one example of that scenario but there are probably many others

Here's a sample project that demonstrates the problem:
https://github.com/nickarora/react-native-markdown-display/tree/rerender-bug/bugexample

[iamacup]

thanks @nickarora and @egarrett94

completely missed this! fixed in 5.1.1, please let me know :)

[LuisRodriguezLD]

Hello. I'm on latest 6.1.6 and this error keeps happening. any workaround? Thanks

Update:
I fixed my rerenders using React.Memo example