diff --git a/lib/client-assets.php b/lib/client-assets.php
index a0ac0b594bd23d..661fc381a4a4d1 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -937,11 +937,11 @@ function gutenberg_register_vendor_scripts() {
 
 	gutenberg_register_vendor_script(
 		'react',
-		'https://unpkg.com/react@16.4.1/umd/react' . $react_suffix . '.js'
+		'https://unpkg.com/react@16.7.0-alpha.0/umd/react' . $react_suffix . '.js'
 	);
 	gutenberg_register_vendor_script(
 		'react-dom',
-		'https://unpkg.com/react-dom@16.4.1/umd/react-dom' . $react_suffix . '.js',
+		'https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom' . $react_suffix . '.js',
 		array( 'react' )
 	);
 	$moment_script = SCRIPT_DEBUG ? 'moment.js' : 'min/moment.min.js';
diff --git a/packages/block-library/src/image/image-size.js b/packages/block-library/src/image/image-size.js
index 0a1b88aed12d71..6cdd6768020cb8 100644
--- a/packages/block-library/src/image/image-size.js
+++ b/packages/block-library/src/image/image-size.js
@@ -1,85 +1,39 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
+import { useRef, useMemo } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { withGlobalEvents } from '@wordpress/compose';
-import { Component } from '@wordpress/element';
-
-class ImageSize extends Component {
-	constructor() {
-		super( ...arguments );
-		this.state = {
-			width: undefined,
-			height: undefined,
+import { useImageSize, useElementSize } from '@wordpress/compose';
+
+function ImageSize( { src, dirtynessTrigger, children } ) {
+	const container = useRef( null );
+	const [ imageWidth, imageHeight ] = useImageSize( src );
+	const [ containerWidth, containerHeight ] = useElementSize( container.current, dirtynessTrigger );
+	const sizes = useMemo( () => {
+		const maxWidth = containerWidth;
+		const exceedMaxWidth = imageWidth > maxWidth;
+		const ratio = imageHeight / imageWidth;
+		const width = exceedMaxWidth ? maxWidth : imageWidth;
+		const height = exceedMaxWidth ? maxWidth * ratio : imageHeight;
+
+		return {
+			imageWidthWithinContainer: width,
+			imageHeightWithinContainer: height,
+			imageWidth,
+			imageHeight,
+			containerWidth,
+			containerHeight,
 		};
-		this.bindContainer = this.bindContainer.bind( this );
-		this.calculateSize = this.calculateSize.bind( this );
-	}
-
-	bindContainer( ref ) {
-		this.container = ref;
-	}
-
-	componentDidUpdate( prevProps ) {
-		if ( this.props.src !== prevProps.src ) {
-			this.setState( {
-				width: undefined,
-				height: undefined,
-			} );
-			this.fetchImageSize();
-		}
-
-		if ( this.props.dirtynessTrigger !== prevProps.dirtynessTrigger ) {
-			this.calculateSize();
-		}
-	}
-
-	componentDidMount() {
-		this.fetchImageSize();
-	}
+	}, [ imageWidth, imageHeight, containerWidth, containerHeight ] );
 
-	componentWillUnmount() {
-		if ( this.image ) {
-			this.image.onload = noop;
-		}
-	}
-
-	fetchImageSize() {
-		this.image = new window.Image();
-		this.image.onload = this.calculateSize;
-		this.image.src = this.props.src;
-	}
-
-	calculateSize() {
-		const maxWidth = this.container.clientWidth;
-		const exceedMaxWidth = this.image.width > maxWidth;
-		const ratio = this.image.height / this.image.width;
-		const width = exceedMaxWidth ? maxWidth : this.image.width;
-		const height = exceedMaxWidth ? maxWidth * ratio : this.image.height;
-		this.setState( { width, height } );
-	}
-
-	render() {
-		const sizes = {
-			imageWidth: this.image && this.image.width,
-			imageHeight: this.image && this.image.height,
-			containerWidth: this.container && this.container.clientWidth,
-			containerHeight: this.container && this.container.clientHeight,
-			imageWidthWithinContainer: this.state.width,
-			imageHeightWithinContainer: this.state.height,
-		};
-		return (
-			<div ref={ this.bindContainer }>
-				{ this.props.children( sizes ) }
-			</div>
-		);
-	}
+	return (
+		<div ref={ container }>
+			{ children( sizes ) }
+		</div>
+	);
 }
 
-export default withGlobalEvents( {
-	resize: 'calculateSize',
-} )( ImageSize );
+export default ImageSize;
diff --git a/packages/compose/src/index.js b/packages/compose/src/index.js
index 4c617480d032d0..65eedab12c8313 100644
--- a/packages/compose/src/index.js
+++ b/packages/compose/src/index.js
@@ -12,6 +12,9 @@ export { default as withInstanceId } from './with-instance-id';
 export { default as withSafeTimeout } from './with-safe-timeout';
 export { default as withState } from './with-state';
 
+export { default as useImageSize } from './use-image-size';
+export { default as useElementSize } from './use-element-size';
+
 /**
  * Composes multiple higher-order components into a single higher-order component. Performs right-to-left function
  * composition, where each successive invocation is supplied the return value of the previous.
diff --git a/packages/compose/src/use-element-size/index.js b/packages/compose/src/use-element-size/index.js
new file mode 100644
index 00000000000000..dc30295075ed86
--- /dev/null
+++ b/packages/compose/src/use-element-size/index.js
@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+
+function useElementSize( element, dirtynessTrigger ) {
+	const [ { width, height }, updateSize ] = useState( {} );
+
+	const updateContainerSize = () => {
+		updateSize( {
+			width: element ? element.clientWidth : undefined,
+			height: element ? element.clientHeight : undefined,
+		} );
+	};
+	useEffect( updateContainerSize, [ element, dirtynessTrigger ] );
+
+	// This could be refactored using a `useGlobalEvent`
+	// to avoid subscribing multiple times to the same event
+	// Similar to withGlobalEvent.
+	useEffect( () => {
+		window.addEventListener( 'resize', updateContainerSize );
+		return () => window.removeEventListener( 'resize', updateContainerSize );
+	}, [] );
+
+	return [ width, height ];
+}
+
+export default useElementSize;
diff --git a/packages/compose/src/use-image-size/index.js b/packages/compose/src/use-image-size/index.js
new file mode 100644
index 00000000000000..0bd7d22ba61d75
--- /dev/null
+++ b/packages/compose/src/use-image-size/index.js
@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+function useImageSize( src ) {
+	const [ { width, height }, updateSize ] = useState( {} );
+
+	useEffect( () => {
+		const image = new window.Image();
+		image.onload = () => {
+			updateSize( { width: image.width, height: image.height } );
+		};
+		image.src = src;
+	}, [ src ] );
+
+	return [ width, height ];
+}
+
+export default useImageSize;