title: UseState change not triggering DOM update after API call
body: <p>I'm trying to populate a rich text editor (<a href="https://tiptap.dev" rel="nofollow noreferrer">tiptap.dev</a>) with the response from an API call. After calling the <code>setEditorContent</code> hook with the data payload, the editor content should update.  I notice that when I modify the local file and save it, the API data is rendered in the DOM (but not on the initial page load).</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default function EditHandbook() {
    const router = useRouter();
    const user = useUser();
    const { query } = useRouter();
  
    const [loading, setLoading] = useState(true);
    const [editorContent, setEditorContent] = useState(null);
  
    // Get handbook by ID
    const id = query.id;
    let handbookText = null;
    function loadDataOnlyOnce() {
      axios
        .get("/api/templater/" + id + "/")
        .then((res) =&gt; {
          handbookText = res.data.handbookContent; // the object returned from api/templater/[id].js
        })
        .finally(() =&gt; {
          setEditorContent(handbookText);
          setLoading(false);
        })
        .catch((err) =&gt; console.log(err));
    }
  
    useEffect(() =&gt; {
      loadDataOnlyOnce();
    }, [id]); // only run once, after id is resolved from router on page load
  
    const editor = useEditor({
      extensions: [StarterKit],
      onUpdate({ editor }) {
        setEditorContent(editor.getHTML());
      },
      content: editorContent,
    });
  
    return (
      &lt;div&gt;
        &lt;TextEditorMenubar editor={editor} /&gt;
        &lt;EditorContent editor={editor} /&gt;
      &lt;/div&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>