title: useEffect won't update code in webview automatically in React Native
body: <p>I use a stack navigation from reactnavigation. When opening Screen X I want to automatically update &quot;let userAnswer = &quot;&quot;;&quot; with a string within a webview. However, the code won't run. It does run and updates the variable when I save my file in visual studio.</p>
  <p>I make the code run via useEffect. This is the webview in my WebViewComponent:</p>
  <pre><code>import { useState, useContext, useEffect } from &quot;react&quot;;
  import { StyleSheet, Text, View, Pressable } from &quot;react-native&quot;;
  import { WebView } from &quot;react-native-webview&quot;;
  import { FontAwesome } from &quot;@expo/vector-icons&quot;;
  import DarkModeContext from &quot;../store/darkmode&quot;;
  
  const html = `
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  ...
      &lt;script&gt;
          function update() {
              var idoc = document.getElementById('iframe').contentWindow.document;
              idoc.open();
              idoc.write(editor.getValue());
              idoc.close();
          }
  
  let userAnswer = &quot;&quot;;
  
  </code></pre>
  <p>Here is the useEffect that is supposed to run in WebViewComponent:</p>
  <pre><code>  useEffect(() =&gt; {
      webref.injectJavaScript(props.defaultContent);
  console.log(&quot;mounted&quot;)
    },[]);
  
    return (
      &lt;View&gt;
        &lt;View style={{ width: &quot;100%&quot;, height: &quot;65%&quot;, marginTop: 0 }}&gt;
          &lt;WebView
            ref={(r) =&gt; (webref = r)}
            androidHardwareAccelerationDisabled={true} // To prevent crash when opening screen
            scalesPageToFit={false}
            scrollEnabled={false}
            source={{ html }}
          /&gt;
        &lt;/View&gt;
  
  </code></pre>
  <p>I get default content prop from the screen I am using the wWebViewComponent in:</p>
  <pre><code>&lt;WebViewComponent
    defaultContent = {`userAnswer += &quot;Hello World&quot;
    editor.setValue(userAnswer, 1);
      `}
  /&gt;
  </code></pre>
  <p>It acts as if the component doesn't mount when navigating to it via reactnavigation, though this is of course not the case. The console.log does return &quot;mounted&quot;. Any ideas?</p>
  <p>Thanks!</p>