JSFiddle - React, Tailwind, and code Playground

by altxg

HTML

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
  <p>Type into the input to leak ArrayBuffers. Each keystroke will unmount and remount the input element and leak a buffer.</p>
	<div id="container"></div>
	<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
	<script type="text/javascript">
		class Demo extends React.Component {
			constructor(props) {
				super(props);
				this.onKeyDown = this.onKeyDown.bind(this);
				this.input = React.createRef();
				this.state = {
					num: 0,
				};
			}

			componentDidMount() {
				this.input.current.focus();
			}

			componentDidUpdate() {
				this.input.current.focus();
			}

			onKeyDown() {
				this.setState((prevState) => ({
					num: prevState.num + 1,
				}));
			}

			render() {
				return React.createElement('input', {
					onKeyDown: this.onKeyDown,
					buffer: new ArrayBuffer(1000000),
					key: this.state.num,
					ref: this.input,
				});
			}
		}

		const container = document.getElementById('container');
		ReactDOM.render(React.createElement(Demo), container);
	</script>
</body>
</html>