title: react-native-render-html: "You seem to update the X prop of the Y component in short periods of time..."
body: <p><em>Notes: I'm the author of <code>react-native-render-html</code>. This question is for educational purposes, <a href="https://stackoverflow.blog/2011/07/01/its-ok-to-ask-and-answer-your-own-questions/">in compliance with StackOverflow policy</a>.</em></p>
  <img src="https://i.stack.imgur.com/an3ST.png" width="300" />
  <p>I am rendering <code>RenderHtml</code> component in a <code>WebDisplay</code> component like so:</p>
  <pre class="lang-js prettyprint-override"><code>import * as React from 'react';
  import {ScrollView, StyleSheet, Text, useWindowDimensions} from 'react-native';
  import RenderHtml from 'react-native-render-html';
  
  const html = '&lt;div&gt;Hello world!&lt;/div&gt;';
  
  function WebDisplay({html}) {
    const {width: contentWidth} = useWindowDimensions();
    const tagsStyles = {
      a: {
        textDecorationLine: 'none',
      },
    };
    return (
      &lt;RenderHtml
        contentWidth={contentWidth}
        source={{html}}
        tagsStyles={tagsStyles}
      /&gt;
    );
  }
  
  export default function App() {
    const [isToastVisible, setIsToastVisible] = React.useState(false);
    React.useEffect(function flipToast() {
      const timeout = setTimeout(() =&gt; {
        setIsToastVisible((v) =&gt; !v);
      }, 30);
      return () =&gt; {
        clearTimeout(timeout);
      };
    });
    return (
      &lt;ScrollView contentContainerStyle={styles.container}&gt;
        &lt;WebDisplay html={html} /&gt;
        {isToastVisible &amp;&amp; &lt;Text&gt;This is a toast!&lt;/Text&gt;}
      &lt;/ScrollView&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flexGrow: 1,
    },
  });
  </code></pre>
  <p>Why am I getting this warning, what does it mean and how to fix it?</p>