diff --git a/packages/recorder/src/callLog.tsx b/packages/recorder/src/callLog.tsx
index a40be416dc..022ffa75df 100644
--- a/packages/recorder/src/callLog.tsx
+++ b/packages/recorder/src/callLog.tsx
@@ -30,7 +30,7 @@ export const CallLogView: React.FC<CallLogProps> = ({
   language,
   log,
 }) => {
-  const messagesEndRef = React.createRef<HTMLDivElement>();
+  const messagesEndRef = React.useRef<HTMLDivElement>(null);
   const [expandOverrides, setExpandOverrides] = React.useState<Map<string, boolean>>(new Map());
   React.useLayoutEffect(() => {
     if (log.find(callLog => callLog.reveal))
diff --git a/packages/recorder/src/recorder.tsx b/packages/recorder/src/recorder.tsx
index ec51aa5537..da5d628706 100644
--- a/packages/recorder/src/recorder.tsx
+++ b/packages/recorder/src/recorder.tsx
@@ -78,7 +78,7 @@ export const Recorder: React.FC<RecorderProps> = ({
       setFileId(value);
   };
 
-  const messagesEndRef = React.createRef<HTMLDivElement>();
+  const messagesEndRef = React.useRef<HTMLDivElement>(null);
   React.useLayoutEffect(() => {
     messagesEndRef.current?.scrollIntoView({ block: 'center', inline: 'nearest' });
   }, [messagesEndRef]);
diff --git a/packages/trace-viewer/src/ui/sourceTab.tsx b/packages/trace-viewer/src/ui/sourceTab.tsx
index 47e07f5758..ff81a4fb62 100644
--- a/packages/trace-viewer/src/ui/sourceTab.tsx
+++ b/packages/trace-viewer/src/ui/sourceTab.tsx
@@ -70,7 +70,7 @@ export const SourceTab: React.FunctionComponent<{
 
   const targetLine = typeof stackInfo === 'string' ? 0 : stackInfo.frames[selectedFrame]?.line || 0;
 
-  const targetLineRef = React.createRef<HTMLDivElement>();
+  const targetLineRef = React.useRef<HTMLDivElement>(null);
   React.useLayoutEffect(() => {
     if (needReveal && targetLineRef.current) {
       targetLineRef.current.scrollIntoView({ block: 'center', inline: 'nearest' });
diff --git a/packages/web/src/components/codeMirrorWrapper.tsx b/packages/web/src/components/codeMirrorWrapper.tsx
index 38b606634f..316d0e2234 100644
--- a/packages/web/src/components/codeMirrorWrapper.tsx
+++ b/packages/web/src/components/codeMirrorWrapper.tsx
@@ -49,9 +49,9 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
   wrapLines,
   onChange,
 }) => {
-  const codemirrorElement = React.createRef<HTMLDivElement>();
+  const codemirrorElement = React.useRef<HTMLDivElement>(null);
   const [modulePromise] = React.useState<Promise<CodeMirror>>(import('./codeMirrorModule').then(m => m.default));
-  const [codemirror, setCodemirror] = React.useState<CodeMirror.Editor>();
+  const [codemirror] = React.useState<{ value?: CodeMirror.Editor }>({});
 
   React.useEffect(() => {
     (async () => {
@@ -70,18 +70,17 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
       if (language === 'csharp')
         mode = 'text/x-csharp';
 
-      if (codemirror
-        && mode === codemirror.getOption('mode')
-        && readOnly === codemirror.getOption('readOnly')
-        && lineNumbers === codemirror.getOption('lineNumbers')
-        && wrapLines === codemirror.getOption('lineWrapping')) {
-        updateEditor(codemirror, text, highlight, revealLine, focusOnChange);
+      if (codemirror.value
+        && mode === codemirror.value.getOption('mode')
+        && readOnly === codemirror.value.getOption('readOnly')
+        && lineNumbers === codemirror.value.getOption('lineNumbers')
+        && wrapLines === codemirror.value.getOption('lineWrapping')) {
+        updateEditor(codemirror.value, text, highlight, revealLine, focusOnChange);
         return;
       }
 
       // Either configuration is different or we don't have a codemirror yet.
-      if (codemirror)
-        codemirror.getWrapperElement().remove();
+      codemirror.value?.getWrapperElement().remove();
 
       const cm = CodeMirror(element, {
         value: '',
@@ -90,7 +89,7 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
         lineNumbers,
         lineWrapping: wrapLines,
       });
-      setCodemirror(cm);
+      codemirror.value = cm;
       if (onChange)
         cm.on('change', () => onChange(cm.getValue()));
       updateEditor(cm, text, highlight, revealLine, focusOnChange);
diff --git a/packages/web/src/components/listView.tsx b/packages/web/src/components/listView.tsx
index 6865e30dc2..fcb1333f45 100644
--- a/packages/web/src/components/listView.tsx
+++ b/packages/web/src/components/listView.tsx
@@ -52,7 +52,7 @@ export function ListView<T>({
   noItemsMessage,
   dataTestId,
 }: ListViewProps<T>) {
-  const itemListRef = React.createRef<HTMLDivElement>();
+  const itemListRef = React.useRef<HTMLDivElement>(null);
   const [highlightedItem, setHighlightedItem] = React.useState<any>();
 
   React.useEffect(() => {
diff --git a/packages/web/src/components/xtermWrapper.tsx b/packages/web/src/components/xtermWrapper.tsx
index 1a1522199d..a35cc424d7 100644
--- a/packages/web/src/components/xtermWrapper.tsx
+++ b/packages/web/src/components/xtermWrapper.tsx
@@ -30,9 +30,9 @@ export type XtermDataSource = {
 export const XtermWrapper: React.FC<{ source: XtermDataSource }> = ({
   source
 }) => {
-  const xtermElement = React.createRef<HTMLDivElement>();
+  const xtermElement = React.useRef<HTMLDivElement>(null);
   const [modulePromise] = React.useState<Promise<XtermModule>>(import('./xtermModule').then(m => m.default));
-  const [terminal, setTerminal] = React.useState<Terminal>();
+  const [terminal] = React.useState<{ value?: Terminal }>({});
   React.useEffect(() => {
     (async () => {
       // Always load the module first.
@@ -41,7 +41,7 @@ export const XtermWrapper: React.FC<{ source: XtermDataSource }> = ({
       if (!element)
         return;
 
-      if (terminal)
+      if (terminal.value)
         return;
 
       const newTerminal = new Terminal({
@@ -65,7 +65,7 @@ export const XtermWrapper: React.FC<{ source: XtermDataSource }> = ({
       };
       newTerminal.open(element);
       fitAddon.fit();
-      setTerminal(newTerminal);
+      terminal.value = newTerminal;
       const resizeObserver = new ResizeObserver(() => {
         source.resize(newTerminal.cols, newTerminal.rows);
         fitAddon.fit();