diff --git a/client/components/tinymce/plugins/wpcom-view/views/embed/view.jsx b/client/components/tinymce/plugins/wpcom-view/views/embed/view.jsx
index 261b03ccec47c..8c174fd77913e 100644
--- a/client/components/tinymce/plugins/wpcom-view/views/embed/view.jsx
+++ b/client/components/tinymce/plugins/wpcom-view/views/embed/view.jsx
@@ -1,12 +1,9 @@
-/* eslint-disable react/no-string-refs */
-
 /**
  * External dependencies
  */
-
 import ReactDom from 'react-dom';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import { pick } from 'lodash';
 import { connect } from 'react-redux';
 
@@ -19,25 +16,12 @@ import QueryEmbed from 'components/data/query-embed';
 import ResizableIframe from 'components/resizable-iframe';
 
 class EmbedView extends Component {
-	state = {
-		wrapper: null,
-	};
+	view = createRef();
+
+	iframe = createRef();
 
 	componentDidMount() {
-		// Rendering the frame follows a specific set of steps, whereby an
-		// initial rendering pass is made, at which time the frame is rendered
-		// in a second pass, before finally setting the frame markup.
-		//
-		// TODO: Investigate and evaluate whether we need to avoid rendering
-		//       the iframe on the initial render pass
-		// eslint-disable-next-line react/no-did-mount-set-state
-		this.setState(
-			{
-				// eslint-disable-line react/no-did-mount-set-state
-				wrapper: this.refs.view,
-			},
-			this.setHtml
-		);
+		this.setHtml();
 	}
 
 	componentDidUpdate( prevProps ) {
@@ -49,12 +33,12 @@ class EmbedView extends Component {
 	}
 
 	constrainEmbedDimensions() {
-		if ( ! this.refs.iframe ) {
+		if ( ! this.iframe ) {
 			return;
 		}
 
-		const view = ReactDom.findDOMNode( this.refs.view );
-		const iframe = ReactDom.findDOMNode( this.refs.iframe );
+		const view = this.view.current;
+		const iframe = ReactDom.findDOMNode( this.iframe.current );
 		if ( ! iframe.contentDocument ) {
 			return;
 		}
@@ -78,11 +62,11 @@ class EmbedView extends Component {
 	}
 
 	setHtml() {
-		if ( ! this.props.embed?.body || ! this.refs.iframe ) {
+		if ( ! this.props.embed?.body || ! this.iframe ) {
 			return;
 		}
 
-		const iframe = ReactDom.findDOMNode( this.refs.iframe );
+		const iframe = ReactDom.findDOMNode( this.iframe.current );
 		if ( ! iframe.contentDocument ) {
 			return;
 		}
@@ -98,13 +82,13 @@ class EmbedView extends Component {
 	}
 
 	renderFrame() {
-		if ( ! this.state.wrapper || ! this.props.embed ) {
+		if ( ! this.props.embed ) {
 			return;
 		}
 
 		return (
 			<ResizableIframe
-				ref="iframe"
+				ref={ this.iframe }
 				onResize={ this.props.onResize }
 				frameBorder="0"
 				seamless
@@ -118,7 +102,7 @@ class EmbedView extends Component {
 
 		return (
 			// eslint-disable-next-line wpcalypso/jsx-classname-namespace
-			<div ref="view" className="wpview-content wpview-type-embed">
+			<div ref={ this.view } className="wpview-content wpview-type-embed">
 				<QueryEmbed siteId={ siteId } url={ content } />
 
 				{ this.renderFrame() }