Created helper function to convert mutable refs from useRef into element refs for the ref prop

src/domains/helpers/DomainStatusIcon.tsx

@@ -8,6 +8,7 @@ import {
   faCircleNotch as loadingStatusIcon,
 } from '@fortawesome/free-solid-svg-icons';
 import { MediaMatcher } from '../../utils/types';
+import { mutableRefToElementRef } from '../../utils/helpers/components';
 import { DomainStatus } from '../data';
 
 interface DomainStatusIconProps {
@@ -34,11 +35,7 @@ export const DomainStatusIcon: FC<DomainStatusIconProps> = ({ status, matchMedia
 
   return (
     <>
-      <span
+      <span ref={mutableRefToElementRef(ref)}>
-        ref={(el: HTMLSpanElement) => {
-          ref.current = el;
-        }}
-      >
         {status === 'valid'
           ? <FontAwesomeIcon fixedWidth icon={checkIcon} className="text-muted" />
           : <FontAwesomeIcon fixedWidth icon={invalidIcon} className="text-danger" />}

src/servers/helpers/ImportServersBtn.tsx

@@ -4,6 +4,7 @@ import { complement, pipe } from 'ramda';
 import { faFileUpload as importIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useToggle } from '../../utils/helpers/hooks';
+import { mutableRefToElementRef } from '../../utils/helpers/components';
 import { ServersImporter } from '../services/ServersImporter';
 import { ServerData, ServersMap } from '../data';
 import { DuplicatedServersModal } from './DuplicatedServersModal';
@@ -78,9 +79,7 @@ export const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC
         type="file"
         accept="text/csv"
         className="import-servers-btn__csv-select"
-        ref={(el) => {
+        ref={mutableRefToElementRef(ref)}
-          ref.current = el ?? undefined;
-        }}
         onChange={onFile}
       />
 

src/short-urls/helpers/ShortUrlVisitsCount.tsx

@@ -8,6 +8,7 @@ import { ShortUrl } from '../data';
 import { SelectedServer } from '../../servers/data';
 import { ShortUrlDetailLink } from './ShortUrlDetailLink';
 import './ShortUrlVisitsCount.scss';
+import { mutableRefToElementRef } from '../../utils/helpers/components';
 
 interface ShortUrlVisitsCountProps {
   shortUrl?: ShortUrl | null;
@@ -35,7 +36,7 @@ export const ShortUrlVisitsCount = (
   }
 
   const prettifiedMaxVisits = prettify(maxVisits);
-  const tooltipRef = useRef<HTMLElement | null>();
+  const tooltipRef = useRef<HTMLElement | undefined>();
 
   return (
     <>
@@ -43,9 +44,7 @@ export const ShortUrlVisitsCount = (
         {visitsLink}
         <small
           className="short-urls-visits-count__max-visits-control"
-          ref={(el) => {
+          ref={mutableRefToElementRef(tooltipRef)}
-            tooltipRef.current = el;
-          }}
         >
           {' '}/ {prettifiedMaxVisits}{' '}
           <sup>

src/tags/TagCard.tsx

@@ -10,6 +10,7 @@ import { getServerId, SelectedServer } from '../servers/data';
 import { TagBullet } from './helpers/TagBullet';
 import { NormalizedTag, TagModalProps } from './data';
 import './TagCard.scss';
+import { mutableRefToElementRef } from '../utils/helpers/components';
 
 export interface TagCardProps {
   tag: NormalizedTag;
@@ -28,7 +29,7 @@ export const TagCard = (
   const [isDeleteModalOpen, toggleDelete] = useToggle();
   const [isEditModalOpen, toggleEdit] = useToggle();
   const [hasTitle,, displayTitle] = useToggle();
-  const titleRef = useRef<HTMLElement>();
+  const titleRef = useRef<HTMLHeadingElement | undefined>();
   const serverId = getServerId(selectedServer);
 
   useEffect(() => {
@@ -55,9 +56,7 @@ export const TagCard = (
         <h5
           className="tag-card__tag-title text-ellipsis"
           title={hasTitle ? tag.tag : undefined}
-          ref={(el) => {
+          ref={mutableRefToElementRef(titleRef)}
-            titleRef.current = el ?? undefined;
-          }}
         >
           <TagBullet tag={tag.tag} colorGenerator={colorGenerator} />
           <span className="tag-card__tag-name" onClick={toggle}>{tag.tag}</span>

src/utils/InfoTooltip.tsx

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { UncontrolledTooltip } from 'reactstrap';
 import { Placement } from '@popperjs/core';
+import { mutableRefToElementRef } from './helpers/components';
 
 type InfoTooltipProps = PropsWithChildren<{
   className?: string;
@@ -10,14 +11,11 @@ type InfoTooltipProps = PropsWithChildren<{
 }>;
 
 export const InfoTooltip: FC<InfoTooltipProps> = ({ className = '', placement, children }) => {
-  const ref = useRef<HTMLSpanElement | null>();
+  const ref = useRef<HTMLSpanElement | undefined>();
-  const refCallback = (el: HTMLSpanElement) => {
-    ref.current = el;
-  };
 
   return (
     <>
-      <span className={className} ref={refCallback}>
+      <span className={className} ref={mutableRefToElementRef(ref)}>
         <FontAwesomeIcon icon={infoIcon} />
       </span>
       <UncontrolledTooltip target={(() => ref.current) as any} placement={placement}>{children}</UncontrolledTooltip>

src/utils/helpers/components.ts

@@ -0,0 +1,5 @@
+import { MutableRefObject, Ref } from 'react';
+
+export const mutableRefToElementRef = <T>(ref: MutableRefObject<T | undefined>): Ref<T> => (el) => {
+  ref.current = el ?? undefined; // eslint-disable-line no-param-reassign
+};