diff --git a/web/account/traditional-login-form.react.js b/web/account/traditional-login-form.react.js
--- a/web/account/traditional-login-form.react.js
+++ b/web/account/traditional-login-form.react.js
@@ -39,7 +39,7 @@
   const signedIdentityKeysBlob: ?SignedIdentityKeysBlob =
     useSignedIdentityKeysBlob();
 
-  const usernameInputRef = React.useRef();
+  const usernameInputRef = React.useRef<?HTMLInputElement>();
   React.useEffect(() => {
     usernameInputRef.current?.focus();
   }, []);
diff --git a/web/avatars/edit-thread-avatar-menu.react.js b/web/avatars/edit-thread-avatar-menu.react.js
--- a/web/avatars/edit-thread-avatar-menu.react.js
+++ b/web/avatars/edit-thread-avatar-menu.react.js
@@ -49,7 +49,7 @@
     [removeThreadAvatar],
   );
 
-  const imageInputRef = React.useRef();
+  const imageInputRef = React.useRef<?HTMLInputElement>();
   const onImageMenuItemClicked = React.useCallback(
     () => imageInputRef.current?.click(),
     [],
diff --git a/web/avatars/edit-user-avatar-menu.react.js b/web/avatars/edit-user-avatar-menu.react.js
--- a/web/avatars/edit-user-avatar-menu.react.js
+++ b/web/avatars/edit-user-avatar-menu.react.js
@@ -61,7 +61,7 @@
     [openEmojiSelectionModal],
   );
 
-  const imageInputRef = React.useRef();
+  const imageInputRef = React.useRef<?HTMLInputElement>();
   const onImageMenuItemClicked = React.useCallback(
     () => imageInputRef.current?.click(),
     [],
diff --git a/web/chat/chat-input-text-area.react.js b/web/chat/chat-input-text-area.react.js
--- a/web/chat/chat-input-text-area.react.js
+++ b/web/chat/chat-input-text-area.react.js
@@ -27,7 +27,7 @@
       onChangePosition,
       maxHeight = defaultMaxTextAreaHeight,
     } = props;
-    const textareaRef = React.useRef(null);
+    const textareaRef = React.useRef<?HTMLTextAreaElement>(null);
 
     const focusAndUpdateText = React.useCallback(() => {
       if (!focus) {
diff --git a/web/chat/chat-message-list-container.react.js b/web/chat/chat-message-list-container.react.js
--- a/web/chat/chat-message-list-container.react.js
+++ b/web/chat/chat-message-list-container.react.js
@@ -75,7 +75,7 @@
     [css.activeContainer]: isActive,
   });
 
-  const containerRef = React.useRef();
+  const containerRef = React.useRef<?HTMLDivElement>();
 
   const onPaste = React.useCallback(
     (e: ClipboardEvent) => {
diff --git a/web/chat/chat-thread-list.react.js b/web/chat/chat-thread-list.react.js
--- a/web/chat/chat-thread-list.react.js
+++ b/web/chat/chat-thread-list.react.js
@@ -59,6 +59,11 @@
   return <div style={style}>{item}</div>;
 };
 
+type VariableSizeListRef = {
+  +resetAfterIndex: (index: number, shouldForceUpdate?: boolean) => void,
+  ...
+};
+
 function ChatThreadList(): React.Node {
   const threadListContext = React.useContext(ThreadListContext);
   invariant(
@@ -108,7 +113,7 @@
     ? 'Create new chat'
     : 'Create new channel';
 
-  const threadListContainerRef = React.useRef();
+  const threadListContainerRef = React.useRef<?VariableSizeListRef>();
 
   const threads = React.useMemo(
     () =>
diff --git a/web/chat/edit-text-message.react.js b/web/chat/edit-text-message.react.js
--- a/web/chat/edit-text-message.react.js
+++ b/web/chat/edit-text-message.react.js
@@ -36,7 +36,7 @@
     useEditModalContext();
   const editMessage = useEditMessage();
 
-  const myRef = React.useRef(null);
+  const myRef = React.useRef<?HTMLDivElement>(null);
 
   const editedMessageDraft = editState?.editedMessageDraft ?? '';
   const threadColor = threadInfo.color;
diff --git a/web/chat/message-tooltip.react.js b/web/chat/message-tooltip.react.js
--- a/web/chat/message-tooltip.react.js
+++ b/web/chat/message-tooltip.react.js
@@ -62,9 +62,10 @@
   // - emojiKeyboardRenderedNode, which will get set in that useEffect and will
   //   trigger the rerendering of this component with the correct height/width
 
-  const [emojiKeyboardNode, setEmojiKeyboardNode] = React.useState(null);
+  const [emojiKeyboardNode, setEmojiKeyboardNode] =
+    React.useState<?HTMLDivElement>(null);
   const [emojiKeyboardRenderedNode, setEmojiKeyboardRenderedNode] =
-    React.useState(null);
+    React.useState<?HTMLDivElement>(null);
 
   React.useEffect(() => {
     if (emojiKeyboardNode) {
diff --git a/web/components/menu.react.js b/web/components/menu.react.js
--- a/web/components/menu.react.js
+++ b/web/components/menu.react.js
@@ -21,7 +21,7 @@
 };
 
 function Menu(props: MenuProps): React.Node {
-  const buttonRef = React.useRef();
+  const buttonRef = React.useRef<?HTMLButtonElement>();
   const {
     renderMenu,
     setMenuPosition,
diff --git a/web/media/encrypted-multimedia.react.js b/web/media/encrypted-multimedia.react.js
--- a/web/media/encrypted-multimedia.react.js
+++ b/web/media/encrypted-multimedia.react.js
@@ -25,6 +25,8 @@
   +elementStyle?: ?Shape<CSSStyle>,
 };
 
+type Source = { +uri: string } | { +error: string };
+
 function EncryptedMultimedia(props: Props): React.Node {
   const {
     blobURI,
@@ -34,8 +36,8 @@
     multimediaClassName,
   } = props;
 
-  const [source, setSource] = React.useState(null);
-  const videoRef = React.useRef(null);
+  const [source, setSource] = React.useState<?Source>(null);
+  const videoRef = React.useRef<?HTMLVideoElement>(null);
 
   React.useEffect(() => {
     let isMounted = true,
diff --git a/web/media/loadable-video.react.js b/web/media/loadable-video.react.js
--- a/web/media/loadable-video.react.js
+++ b/web/media/loadable-video.react.js
@@ -36,7 +36,7 @@
   const { thumbnailURI, thumbnailBlobURI, thumbnailEncryptionKey } =
     thumbnailSource;
 
-  const [thumbnailImage, setThumbnailImage] = React.useState(null);
+  const [thumbnailImage, setThumbnailImage] = React.useState<?string>(null);
 
   React.useEffect(() => {
     let isMounted = true,
diff --git a/web/media/media-utils.js b/web/media/media-utils.js
--- a/web/media/media-utils.js
+++ b/web/media/media-utils.js
@@ -240,7 +240,7 @@
 }
 
 function usePlaceholder(thumbHash: ?string, encryptionKey: ?string): ?string {
-  const [placeholder, setPlaceholder] = React.useState(null);
+  const [placeholder, setPlaceholder] = React.useState<?string>(null);
 
   React.useEffect(() => {
     if (!thumbHash) {
diff --git a/web/modals/chat/message-results-modal.react.js b/web/modals/chat/message-results-modal.react.js
--- a/web/modals/chat/message-results-modal.react.js
+++ b/web/modals/chat/message-results-modal.react.js
@@ -14,6 +14,7 @@
   isInvalidPinSourceForThread,
   modifyItemForResultScreen,
 } from 'lib/shared/message-utils.js';
+import type { RawMessageInfo } from 'lib/types/message-types.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
@@ -36,7 +37,9 @@
   const { threadInfo, modalName } = props;
   const { id: threadID } = threadInfo;
   const { popModal } = useModalContext();
-  const [rawMessageResults, setRawMessageResults] = React.useState([]);
+  const [rawMessageResults, setRawMessageResults] = React.useState<
+    $ReadOnlyArray<RawMessageInfo>,
+  >([]);
 
   const callFetchPinnedMessages = useFetchPinnedMessages();
   const dispatchActionPromise = useDispatchActionPromise();
diff --git a/web/modals/search/message-search-modal.react.js b/web/modals/search/message-search-modal.react.js
--- a/web/modals/search/message-search-modal.react.js
+++ b/web/modals/search/message-search-modal.react.js
@@ -56,7 +56,7 @@
 
   const { clearTooltip } = useTooltipContext();
 
-  const messageContainer = React.useRef(null);
+  const messageContainer = React.useRef<?HTMLDivElement>(null);
 
   const possiblyLoadMoreMessages = React.useCallback(() => {
     if (!messageContainer.current) {
diff --git a/web/modals/threads/gallery/thread-settings-media-gallery.react.js b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
--- a/web/modals/threads/gallery/thread-settings-media-gallery.react.js
+++ b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
@@ -36,7 +36,7 @@
   const modalName = 'Media';
 
   const callFetchThreadMedia = useFetchThreadMedia();
-  const [mediaInfos, setMediaInfos] = React.useState([]);
+  const [mediaInfos, setMediaInfos] = React.useState<$ReadOnlyArray<Media>>([]);
   const [tab, setTab] = React.useState<MediaGalleryTab>(activeTab);
 
   React.useEffect(() => {
diff --git a/web/modals/threads/members/members-list.react.js b/web/modals/threads/members/members-list.react.js
--- a/web/modals/threads/members/members-list.react.js
+++ b/web/modals/threads/members/members-list.react.js
@@ -22,7 +22,7 @@
 
 function ThreadMembersList(props: Props): React.Node {
   const { threadMembers, threadInfo } = props;
-  const [openMenu, setOpenMenu] = React.useState(null);
+  const [openMenu, setOpenMenu] = React.useState<?string>(null);
   const hasMembers = threadMembers.length > 0;
 
   const threadMembersWithENSNames = useENSNames(threadMembers);
diff --git a/web/modals/threads/settings/thread-settings-general-tab.react.js b/web/modals/threads/settings/thread-settings-general-tab.react.js
--- a/web/modals/threads/settings/thread-settings-general-tab.react.js
+++ b/web/modals/threads/settings/thread-settings-general-tab.react.js
@@ -47,7 +47,7 @@
   const dispatchActionPromise = useDispatchActionPromise();
   const callChangeThreadSettings = useChangeThreadSettings();
 
-  const nameInputRef = React.useRef();
+  const nameInputRef = React.useRef<?HTMLInputElement>();
 
   React.useEffect(() => {
     nameInputRef.current?.focus();
diff --git a/web/modals/threads/thread-picker-modal.react.js b/web/modals/threads/thread-picker-modal.react.js
--- a/web/modals/threads/thread-picker-modal.react.js
+++ b/web/modals/threads/thread-picker-modal.react.js
@@ -66,7 +66,7 @@
     new Set(),
   );
 
-  const searchRef = React.useRef();
+  const searchRef = React.useRef<?HTMLInputElement>();
 
   React.useEffect(() => {
     searchRef.current?.focus();
diff --git a/web/push-notif/badge-handler.react.js b/web/push-notif/badge-handler.react.js
--- a/web/push-notif/badge-handler.react.js
+++ b/web/push-notif/badge-handler.react.js
@@ -4,6 +4,7 @@
 
 import { connectionSelector } from 'lib/selectors/keyserver-selectors.js';
 import { unreadCount } from 'lib/selectors/thread-selectors.js';
+import type { ConnectionInfo } from 'lib/types/socket-types.js';
 
 import electron from '../electron.js';
 import { useSelector } from '../redux/redux-utils.js';
@@ -11,7 +12,7 @@
 
 function useBadgeHandler() {
   const connection = useSelector(connectionSelector);
-  const prevConnection = React.useRef();
+  const prevConnection = React.useRef<?ConnectionInfo>();
 
   const boundUnreadCount = useSelector(unreadCount);
   const prevUnreadCount = React.useRef(boundUnreadCount);
diff --git a/web/redux/focus-handler.react.js b/web/redux/focus-handler.react.js
--- a/web/redux/focus-handler.react.js
+++ b/web/redux/focus-handler.react.js
@@ -45,7 +45,7 @@
   );
 
   const prevFocusedRef = React.useRef(curWindowActive);
-  const timerRef = React.useRef();
+  const timerRef = React.useRef<?TimeoutID>();
   React.useEffect(() => {
     const prevFocused = prevFocusedRef.current;
     if (focused && !prevFocused) {
diff --git a/web/redux/policy-acknowledgment-handler.js b/web/redux/policy-acknowledgment-handler.js
--- a/web/redux/policy-acknowledgment-handler.js
+++ b/web/redux/policy-acknowledgment-handler.js
@@ -12,7 +12,7 @@
   const termsAndPrivacyState = useSelector(
     state => state.userPolicies?.[policyTypes.tosAndPrivacyPolicy],
   );
-  const [policyModalKey, setPolicyModalKey] = React.useState(null);
+  const [policyModalKey, setPolicyModalKey] = React.useState<?string>(null);
   const { pushModal, popModal, modals } = useModalContext();
 
   const policyModalVisible = React.useMemo(
diff --git a/web/settings/tunnelbroker-test.react.js b/web/settings/tunnelbroker-test.react.js
--- a/web/settings/tunnelbroker-test.react.js
+++ b/web/settings/tunnelbroker-test.react.js
@@ -21,8 +21,8 @@
   const [message, setMessage] = React.useState('');
   const [loading, setLoading] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState('');
-  const recipientInput = React.useRef(null);
-  const messageInput = React.useRef(null);
+  const recipientInput = React.useRef<?HTMLInputElement>(null);
+  const messageInput = React.useRef<?HTMLInputElement>(null);
 
   const onSubmit = React.useCallback(
     async (event: SyntheticEvent<HTMLButtonElement>) => {
diff --git a/web/utils/tooltip-action-utils.js b/web/utils/tooltip-action-utils.js
--- a/web/utils/tooltip-action-utils.js
+++ b/web/utils/tooltip-action-utils.js
@@ -34,6 +34,7 @@
 import { getComposedMessageID } from '../chat/chat-constants.js';
 import { useEditModalContext } from '../chat/edit-message-provider.js';
 import MessageTooltip from '../chat/message-tooltip.react.js';
+import type { PositionInfo } from '../chat/position-types.js';
 import ReactionTooltip from '../chat/reaction-tooltip.react.js';
 import { useTooltipContext } from '../chat/tooltip-provider.js';
 import CommIcon from '../CommIcon.react.js';
@@ -60,10 +61,11 @@
   availablePositions,
 }: UseTooltipArgs): UseTooltipResult {
   const [onMouseLeave, setOnMouseLeave] = React.useState<?() => mixed>(null);
-  const [tooltipSourcePosition, setTooltipSourcePosition] = React.useState();
+  const [tooltipSourcePosition, setTooltipSourcePosition] =
+    React.useState<?PositionInfo>();
 
   const { renderTooltip } = useTooltipContext();
-  const updateTooltip = React.useRef();
+  const updateTooltip = React.useRef<?(React.Node) => mixed>();
 
   const onMouseEnter = React.useCallback(
     (event: SyntheticEvent<HTMLElement>) => {