Remove dependency resolution override for React 19 types (#39569)

Co-authored-by: ChaosExAnima <ChaosExAnima@users.noreply.github.com>

app/javascript/mastodon/hooks/useAudioContext.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react';
 
 interface AudioContextOptions {
-  audioElementRef: React.MutableRefObject<HTMLAudioElement | null>;
+  audioElementRef: React.RefObject<HTMLAudioElement | null>;
 }
 
 /**
@@ -13,9 +13,9 @@ interface AudioContextOptions {
  */
 
 export const useAudioContext = ({ audioElementRef }: AudioContextOptions) => {
-  const audioContextRef = useRef<AudioContext>();
-  const sourceRef = useRef<MediaElementAudioSourceNode>();
-  const gainNodeRef = useRef<GainNode>();
+  const audioContextRef = useRef<AudioContext>(null);
+  const sourceRef = useRef<MediaElementAudioSourceNode>(null);
+  const gainNodeRef = useRef<GainNode>(null);
 
   useEffect(() => {
     if (!audioElementRef.current || typeof AudioContext === 'undefined') {

app/javascript/mastodon/hooks/useAudioVisualizer.ts

@@ -11,8 +11,8 @@ const normalizeFrequencies = (arr: Float32Array): number[] => {
 };
 
 interface AudioVisualiserOptions {
-  audioContextRef: React.MutableRefObject<AudioContext | undefined>;
-  sourceRef: React.MutableRefObject<MediaElementAudioSourceNode | undefined>;
+  audioContextRef: React.RefObject<AudioContext | null>;
+  sourceRef: React.RefObject<MediaElementAudioSourceNode | null>;
   numBands: number;
 }
 
@@ -21,7 +21,7 @@ export const useAudioVisualizer = ({
   sourceRef,
   numBands,
 }: AudioVisualiserOptions) => {
-  const analyzerRef = useRef<AnalyserNode>();
+  const analyzerRef = useRef<AnalyserNode>(null);
 
   const [frequencyBands, setFrequencyBands] = useState<number[]>(
     new Array(numBands).fill(0),

app/javascript/mastodon/hooks/useObserver.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
 export function useResizeObserver(callback: ResizeObserverCallback) {
-  const observerRef = useRef<ResizeObserver | null>(null);
+  const observerRef = useRef<ResizeObserver>(null);
   observerRef.current ??= new ResizeObserver(callback);
 
   useEffect(() => {
@@ -15,7 +15,7 @@ export function useResizeObserver(callback: ResizeObserverCallback) {
 }
 
 export function useMutationObserver(callback: MutationCallback) {
-  const observerRef = useRef<MutationObserver | null>(null);
+  const observerRef = useRef<MutationObserver>(null);
   observerRef.current ??= new MutationObserver(callback);
 
   useEffect(() => {

app/javascript/mastodon/hooks/useOnClickOutside.ts

@@ -2,10 +2,10 @@
  * Handle clicks that occur outside of the element(s) provided in the first parameter
  */
 
-import type { MutableRefObject } from 'react';
+import type { RefObject } from 'react';
 import { useEffect } from 'react';
 
-type ElementRef = MutableRefObject<HTMLElement | null>;
+type ElementRef = RefObject<HTMLElement | null>;
 
 export function useOnClickOutside(
   excludedElementRef: ElementRef | ElementRef[] | null,

app/javascript/mastodon/hooks/useOverflow.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject, RefCallback } from 'react';
+import type { RefObject, RefCallback } from 'react';
 import { useState, useRef, useCallback, useEffect } from 'react';
 
 import { useMutationObserver, useResizeObserver } from './useObserver';
@@ -20,7 +20,7 @@ export function useOverflowButton({
   const [maxWidth, setMaxWidth] = useState<number | 'none'>('none');
 
   // This is the item container element.
-  const listRef = useRef<HTMLElement | null>(null);
+  const listRef = useRef<HTMLElement>(null);
 
   // The main recalculation function.
   const handleRecalculate = useCallback(() => {
@@ -102,7 +102,7 @@ export function useOverflowScroll({
   const [canScrollLeft, setCanScrollLeft] = useState(false);
   const [canScrollRight, setCanScrollRight] = useState(false);
 
-  const bodyRef = useRef<HTMLElement | null>(null);
+  const bodyRef = useRef<HTMLElement>(null);
 
   // Recalculate scrollable state
   const handleRecalculate = useCallback(() => {
@@ -176,13 +176,11 @@ export function useOverflowObservers({
   onWrapperRef,
 }: {
   onRecalculate: () => void;
-  onListRef?: RefCallback<HTMLElement> | MutableRefObject<HTMLElement | null>;
-  onWrapperRef?:
-    | RefCallback<HTMLElement>
-    | MutableRefObject<HTMLElement | null>;
+  onListRef?: RefCallback<HTMLElement> | RefObject<HTMLElement | null>;
+  onWrapperRef?: RefCallback<HTMLElement> | RefObject<HTMLElement | null>;
 }) {
   // This is the item container element.
-  const listRef = useRef<HTMLElement | null>(null);
+  const listRef = useRef<HTMLElement>(null);
 
   const resizeObserver = useResizeObserver(onRecalculate);
 
@@ -213,7 +211,7 @@ export function useOverflowObservers({
   }, [handleChildrenChange, mutationObserver, resizeObserver]);
 
   // Watch the wrapper for size changes, and recalculate when it resizes.
-  const wrapperRef = useRef<HTMLElement | null>(null);
+  const wrapperRef = useRef<HTMLElement>(null);
   const wrapperRefCallback = useCallback(
     (node: HTMLElement | null) => {
       if (node) {

app/javascript/mastodon/hooks/useSearchAccounts.ts

@@ -30,7 +30,7 @@ export function useSearchAccounts({
     'idle' | 'loading' | 'error'
   >('idle');
 
-  const searchRequestRef = useRef<AbortController | null>(null);
+  const searchRequestRef = useRef<AbortController>(null);
 
   const searchAccounts = useDebouncedCallback(
     async (value: string) => {

app/javascript/mastodon/hooks/useSearchTags.ts

@@ -44,7 +44,7 @@ export function useSearchTags({
     'idle' | 'loading' | 'error'
   >('idle');
 
-  const searchRequestRef = useRef<AbortController | null>(null);
+  const searchRequestRef = useRef<AbortController>(null);
 
   const searchTags = useDebouncedCallback(
     (value: string) => {

app/javascript/mastodon/hooks/useSelectableClick.ts

@@ -6,7 +6,7 @@ export const useSelectableClick = (
   onClick: React.MouseEventHandler,
   maxDelta = 5,
 ) => {
-  const clickPositionRef = useRef<Position | null>(null);
+  const clickPositionRef = useRef<Position>(null);
 
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
     clickPositionRef.current = [e.clientX, e.clientY];

app/javascript/mastodon/hooks/useTimeout.ts

@@ -1,8 +1,8 @@
 import { useRef, useCallback, useEffect } from 'react';
 
 export const useTimeout = () => {
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
-  const callbackRef = useRef<() => void>();
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
+  const callbackRef = useRef<() => void>(null);
 
   const set = useCallback((callback: () => void, delay: number) => {
     if (timeoutRef.current) {
@@ -28,8 +28,8 @@ export const useTimeout = () => {
   const cancel = useCallback(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
-      timeoutRef.current = undefined;
-      callbackRef.current = undefined;
+      timeoutRef.current = null;
+      callbackRef.current = null;
     }
   }, []);