refactor: Swap effect for input handler

src/components/controllers/repl/index.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'preact/hooks';
+import { useState } from 'preact/hooks';
 import { Splitter } from '../../splitter';
 import { EXAMPLES, getExample, loadExample } from './examples';
 import { ErrorOverlay } from './error-overlay';
@@ -42,18 +42,22 @@ export function Repl({ code, slug }) {
 		});
 	};
 
-	useEffect(() => {
+	const onEditorInput = (value) => {
+		setEditorCode(value);
+
+		// Clears the example & code query params when a user
+		// begins to modify the code
+		if (!exampleSlug || !location.search) return;
 		const example = getExample(exampleSlug);
-		(async function () {
-			if (example) {
-				const code = await loadExample(example.url);
-				if (location.search && code !== editorCode) {
+		if (example) {
+			loadExample(example.url).then(exampleCode => {
+				if (exampleCode !== value) {
 					setExampleSlug('');
 					history.replaceState(null, null, '/repl');
 				}
-			}
-		})();
-	}, [editorCode]);
+			});
+		}
+	};
 
 	const share = () => {
 		if (!exampleSlug) {
@@ -138,7 +142,7 @@ export function Repl({ code, slug }) {
 						value={editorCode}
 						baseExampleSlug={exampleSlug}
 						error={error}
-						onInput={setEditorCode}
+						onInput={onEditorInput}
 					/>
 				</Splitter>
 			</div>