React Compatibility: Ensure useRef usage includes an argument. (#38765)

projects/js-packages/connection/changelog/update-react-compat-useref-requires-argument

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+React 19 compatibility: Making sure useRef includes an argument.

projects/js-packages/connection/components/in-place-connection/index.jsx

@@ -34,8 +34,8 @@ const InPlaceConnection = props => {
 	} = props;
 	let { height = '300' } = props;
 
-	const iframeWrapRef = useRef();
-	const iframeRef = useRef();
+	const iframeWrapRef = useRef( undefined );
+	const iframeRef = useRef( undefined );
 
 	/**
 	 * Handles messages received from inside the iframe.

projects/packages/forms/changelog/update-react-compat-useref-requires-argument

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+React 19 compatibility: Making sure useRef includes an argument.

projects/packages/forms/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-forms",
-	"version": "0.32.7",
+	"version": "0.32.8-alpha",
 	"description": "Jetpack Forms",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/forms/#readme",
 	"bugs": {

projects/packages/forms/src/blocks/contact-form/components/jetpack-field-dropdown.js

@@ -14,7 +14,7 @@ import { useJetpackFieldStyles } from './use-jetpack-field-styles';
 
 const JetpackDropdown = ( { attributes, clientId, isSelected, name, setAttributes } ) => {
 	const { id, label, options, required, requiredText, toggleLabel, width } = attributes;
-	const optionsWrapper = useRef();
+	const optionsWrapper = useRef( undefined );
 	const formStyle = useFormStyle( clientId );
 
 	const classes = clsx( 'jetpack-field jetpack-field-dropdown', {

projects/packages/forms/src/blocks/contact-form/util/with-style-variables.js

@@ -3,7 +3,7 @@ import { useRef } from '@wordpress/element';
 
 export const withStyleVariables = WrappedComponent => props => {
 	const { generateStyleVariables } = window.jetpackForms;
-	const componentRef = useRef();
+	const componentRef = useRef( undefined );
 
 	return (
 		<WrappedComponent

projects/packages/forms/src/class-jetpack-forms.php

@@ -15,7 +15,7 @@
  */
 class Jetpack_Forms {
 
-	const PACKAGE_VERSION = '0.32.7';
+	const PACKAGE_VERSION = '0.32.8-alpha';
 
 	/**
 	 * Load the contact form module.

projects/packages/forms/src/dashboard/components/switch-transition/index.js

@@ -20,8 +20,8 @@ const SwitchTransition = ( { activeViewKey, children, duration, ...props }, ref
 	const [ viewKey, setViewKey ] = useState( activeViewKey );
 	const [ activeView, setActiveView ] = useState( 0 );
 
-	const refA = useRef();
-	const refB = useRef();
+	const refA = useRef( undefined );
+	const refB = useRef( undefined );
 
 	useEffect( () => {
 		if ( viewKey === activeViewKey ) {

projects/packages/forms/src/dashboard/inbox/export-modal/index.js

@@ -18,7 +18,7 @@ import GoogleDriveExport from './google-drive';
 import './style.scss';
 
 const ExportModal = ( { isVisible, onClose } ) => {
-	const backdrop = useRef();
+	const backdrop = useRef( undefined );
 
 	const selected = useSelect( select => select( STORE_NAME ).getSelectedResponseIds(), [] );
 	const { query } = useFeedbackQuery();

projects/packages/forms/src/dashboard/inbox/index.js

@@ -57,7 +57,7 @@ const TABS = [
 ];
 
 const Inbox = () => {
-	const stickySentinel = useRef();
+	const stickySentinel = useRef( undefined );
 	const [ responseAnimationDirection, setResponseAnimationDirection ] = useState( 1 );
 	const [ showExportModal, setShowExportModal ] = useState( false );
 	const [ isSticky, setSticky ] = useState( false );

projects/packages/forms/src/dashboard/inbox/response.js

@@ -16,7 +16,7 @@ import { formatFieldName, formatFieldValue, getDisplayName } from './util';
 const InboxResponse = ( { loading, response } ) => {
 	const [ emailCopied, setEmailCopied ] = useState( false );
 
-	const ref = useRef();
+	const ref = useRef( undefined );
 
 	useEffect( () => {
 		if ( ! ref.current ) {

projects/packages/videopress/changelog/update-react-compat-useref-requires-argument

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+React 19 compatibility: Making sure useRef includes an argument.

projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js

@@ -54,7 +54,7 @@ export default function Player( { isSelected, attributes } ) {
 	const [ isPlayerReady, setIsPlayerReady ] = useState( false );
 	const [ token, setToken ] = useState();
 	const [ previewCheckAttempts, setPreviewCheckAttempts ] = useState( 0 );
-	const previewCheckTimer = useRef();
+	const previewCheckTimer = useRef( undefined );
 
 	// Fetch token for a VideoPress GUID
 	useEffect( () => {

projects/packages/videopress/src/client/block-editor/hooks/use-video-player/Readme.md

@@ -4,7 +4,7 @@ React custom hook to listen and control the video player through events provided
 
 ```jsx
 function myVideoComponent( { id, guid } ) {
-	const iframeRef = useRef();
+	const iframeRef = useRef( undefined );
 	const { playerIsReady } = useVideoPlayer( iframeRef, isRequestingPreview );
 
 	return (

projects/plugins/jetpack/_inc/client/recommendations/timer/index.jsx

@@ -4,7 +4,7 @@ import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react'
 const Timer = ( { label, timeClassName, expiryDate } ) => {
 	const date = useMemo( () => new Date( expiryDate ), [ expiryDate ] );
 	const [ duration, setDuration ] = useState( date - Date.now() );
-	const intervalRef = useRef();
+	const intervalRef = useRef( undefined );
 
 	const tick = useCallback( () => {
 		setDuration( date - Date.now() );

projects/plugins/jetpack/changelog/update-react-compat-useref-requires-argument

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+React 19 compatibility: Making sure useRef includes an argument. 

projects/plugins/jetpack/extensions/blocks/ai-assistant/hooks/use-ai-assistant/index.js

@@ -60,7 +60,7 @@ const useAIAssistant = ( {
 	const postId = useSelect( select => select( 'core/editor' ).getCurrentPostId() );
 
 	const updatedMessages = useRef( [] );
-	const lastUserPrompt = useRef();
+	const lastUserPrompt = useRef( undefined );
 
 	const onSuggestion = detail => {
 		// Remove the delimiter from the suggestion and update the block.

projects/plugins/jetpack/extensions/blocks/blogroll/use-recommendations.js

@@ -6,7 +6,7 @@ export default function useRecommendations( enabled = false ) {
 	const [ isLoading, setIsLoading ] = useState( false );
 	const [ errorMessage, setErrorMessage ] = useState( null );
 	const [ recommendations, setRecommendations ] = useState( [] );
-	const abortControllerRef = useRef();
+	const abortControllerRef = useRef( undefined );
 
 	useEffect( () => {
 		if ( ! enabled ) {

projects/plugins/jetpack/extensions/blocks/blogroll/use-subscriptions.js

@@ -8,7 +8,7 @@ export default function useSubscriptions( { ignore_user_blogs } ) {
 	const [ isLoading, setIsLoading ] = useState( false );
 	const [ errorMessage, setErrorMessage ] = useState( null );
 	const [ subscriptions, setSubscriptions ] = useState( [] );
-	const abortControllerRef = useRef();
+	const abortControllerRef = useRef( undefined );
 
 	useEffect( () => {
 		setIsLoading( true );

projects/plugins/jetpack/extensions/blocks/image-compare/edit.js

@@ -19,7 +19,7 @@ const Edit = ( { attributes, clientId, isSelected, setAttributes } ) => {
 	let sizes = null;
 
 	const blockProps = useBlockProps();
-	const juxtaposeRef = useRef();
+	const juxtaposeRef = useRef( undefined );
 	if ( useResizeObserver ) {
 		// Let's look for resize so we can trigger the thing.
 		[ resizeListener, sizes ] = useResizeObserver();

projects/plugins/jetpack/extensions/blocks/instagram-gallery/image-transition.js

@@ -5,7 +5,7 @@ export default function ImageTransition( { src, alt, spacing } ) {
 	const [ loaded, setLoaded ] = useState( false );
 	const [ containerHeight, setContainerHeight ] = useState( 'auto' );
 
-	const img = useRef();
+	const img = useRef( undefined );
 
 	const onImageLoad = () => {
 		setLoaded( true );

projects/plugins/jetpack/extensions/blocks/map/location-search/mapkit.js

@@ -7,8 +7,8 @@ import { useMapkit } from '../mapkit/hooks';
 const placeholderText = __( 'Add a marker…', 'jetpack' );
 
 const MapkitLocationSearch = ( { label, onAddPoint } ) => {
-	const containerRef = useRef();
-	const textRef = useRef();
+	const containerRef = useRef( undefined );
+	const textRef = useRef( undefined );
 	const { mapkit } = useMapkit();
 	const search = new mapkit.Search( {
 		includePointsOfInterest: false,

projects/plugins/jetpack/extensions/blocks/opentable/use-previous.js

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from '@wordpress/element';
 
 export default function usePrevious( value ) {
-	const ref = useRef();
+	const ref = useRef( undefined );
 
 	useEffect( () => {
 		ref.current = value;

projects/plugins/jetpack/extensions/blocks/podcast-player/edit.js

@@ -87,7 +87,7 @@ const PodcastPlayerEdit = ( {
 	const [ defaultMaxItems, setDefaultMaxItems ] = useState( 10 );
 
 	// State.
-	const cancellableFetch = useRef();
+	const cancellableFetch = useRef( undefined );
 	const [ { selectedGuid, checkUrl, ...state }, dispatch ] = useReducer( podcastPlayerReducer, {
 		editedUrl: url || '',
 		isEditing: ! url && ! exampleFeedData,

projects/plugins/jetpack/extensions/blocks/story/player/expandable-sandbox.js

@@ -19,8 +19,8 @@ export default function ExpandableSandbox( {
 	playerQuerySelector,
 	children,
 } ) {
-	const rootElementRef = useRef();
-	const modalRef = useRef();
+	const rootElementRef = useRef( undefined );
+	const modalRef = useRef( undefined );
 	const [ lastScrollPosition, setLastScrollPosition ] = useState( null );
 	const shouldUseFullscreenAPI = isMobile && fullscreenAPI.enabled();
 	const isFullPageModalOpened = fullscreen && ! shouldUseFullscreenAPI;

projects/plugins/jetpack/extensions/blocks/story/player/lib/use-long-press.js

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef } from '@wordpress/element';
 
 const useLongPress = callback => {
-	const touchTimer = useRef();
-	const targetElement = useRef();
+	const touchTimer = useRef( undefined );
+	const targetElement = useRef( undefined );
 	const savedCallback = useRef( callback );
 
 	const preventGhostClick = useCallback( event => {

projects/plugins/jetpack/extensions/blocks/story/player/player-ui.js

@@ -42,7 +42,7 @@ export default function PlayerUI( { id, slides, metadata, disabled } ) {
 			[ id ]
 		);
 
-	const slideContainerRef = useRef();
+	const slideContainerRef = useRef( undefined );
 	const [ maxSlideWidth, setMaxSlideWidth ] = useState( null );
 	const [ resizeListener, { width, height } ] = useResizeObserver();
 	const [ targetAspectRatio, setTargetAspectRatio ] = useState( settings.defaultAspectRatio );

projects/plugins/jetpack/extensions/extended-blocks/paid-blocks/media-replace-flow.js

@@ -10,7 +10,7 @@ export default createHigherOrderComponent(
 		const { name } = useBlockEditContext();
 		const usableBlocksProps = getUsableBlockProps( name );
 
-		const preUploadFile = useRef();
+		const preUploadFile = useRef( undefined );
 		if ( ! usableBlocksProps?.mediaReplaceFlow || ! isUpgradable( name ) ) {
 			return <MediaReplaceFlow { ...props } />;
 		}

projects/plugins/jetpack/extensions/plugins/post-publish-qr-post-panel/components/qr-post.js

@@ -14,7 +14,7 @@ import useSiteLogo from '../hooks/use-site-logo.js';
  * @returns {Component} The react component.
  */
 export function QRPost() {
-	const wrapperElementRef = useRef();
+	const wrapperElementRef = useRef( undefined );
 
 	// Pick and convert Jetpack logo to data image.
 	const [ jetpackLogoUrl, setJetpackLogo ] = useState();
@@ -59,7 +59,7 @@ export function QRPost() {
 }
 
 export function QRPostButton() {
-	const qrCodeRef = useRef();
+	const qrCodeRef = useRef( undefined );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const switchModal = () => setIsModalOpen( v => ! v );
 	const closeModal = () => setIsModalOpen( false );

projects/plugins/jetpack/extensions/shared/components/audio-player/index.jsx

@@ -38,7 +38,7 @@ function AudioPlayer( {
 	loadWhenReady = false,
 	preload = 'metadata',
 } ) {
-	const audioRef = useRef();
+	const audioRef = useRef( undefined );
 
 	/**
 	 * Play current audio.

projects/plugins/jetpack/extensions/shared/external-media/sources/openverse.js

@@ -36,7 +36,7 @@ function OpenverseMedia( props ) {
 		[ getMedia, searchQuery ]
 	);
 
-	const previousSearchQueryValue = useRef();
+	const previousSearchQueryValue = useRef( undefined );
 	const onSearch = useCallback(
 		event => {
 			event.preventDefault();

projects/plugins/jetpack/extensions/shared/external-media/sources/pexels.js

@@ -37,7 +37,7 @@ function PexelsMedia( props ) {
 		[ getMedia, searchQuery ]
 	);
 
-	const previousSearchQueryValue = useRef();
+	const previousSearchQueryValue = useRef( undefined );
 	const onSearch = useCallback(
 		event => {
 			event.preventDefault();

projects/plugins/jetpack/extensions/shared/use-width.js

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from '@wordpress/element';
 
 const usePrevious = value => {
-	const ref = useRef();
+	const ref = useRef( undefined );
 
 	useEffect( () => {
 		ref.current = value;

projects/plugins/migration/changelog/update-react-compat-useref-requires-argument

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+React 19 compatibility: Making sure useRef includes an argument.

projects/plugins/migration/src/js/components/hooks/use-migration-status.ts

@@ -12,7 +12,7 @@ export function useMigrationstatus( restApi: {
 	fetchMigrationStatus: () => Promise< MigrationStatus >;
 } ): MigrationStatus {
 	const FETCH_INTERVAL = 3000;
-	const activeIntervalId = useRef();
+	const activeIntervalId = useRef( undefined );
 	const [ migrationStatus, setMigrationStatus ] = useState();
 
 	const clearActiveInterval = () => {

projects/plugins/protect/changelog/update-react-compat-useref-requires-argument

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+React 19 compatibility: Making sure useRef includes an argument.

projects/plugins/protect/src/js/components/navigation/index.jsx

@@ -15,7 +15,7 @@ const NavigationList = ( { children } ) => (
 );
 
 const NavigationDropdown = ( { children, data } ) => {
-	const ref = useRef();
+	const ref = useRef( undefined );
 	const [ listOpen, setListOpen ] = useState( false );
 	const item = data?.items?.find( navItem => navItem?.id === data?.selectedItem ) ?? {
 		label: __( 'See all results', 'jetpack-protect' ),