From d66e0dbb323cfa37922dcb0f475b7c87f8fc4dce Mon Sep 17 00:00:00 2001 From: Karen Attfield Date: Fri, 9 Aug 2024 16:46:30 +0100 Subject: [PATCH] React Compatibility: Ensure useRef usage includes an argument. (#38765) --- .../changelog/update-react-compat-useref-requires-argument | 4 ++++ .../connection/components/in-place-connection/index.jsx | 4 ++-- .../changelog/update-react-compat-useref-requires-argument | 4 ++++ projects/packages/forms/package.json | 2 +- .../blocks/contact-form/components/jetpack-field-dropdown.js | 2 +- .../src/blocks/contact-form/util/with-style-variables.js | 2 +- projects/packages/forms/src/class-jetpack-forms.php | 2 +- .../forms/src/dashboard/components/switch-transition/index.js | 4 ++-- .../packages/forms/src/dashboard/inbox/export-modal/index.js | 2 +- projects/packages/forms/src/dashboard/inbox/index.js | 2 +- projects/packages/forms/src/dashboard/inbox/response.js | 2 +- .../changelog/update-react-compat-useref-requires-argument | 4 ++++ .../blocks/video/components/player/index.native.js | 2 +- .../src/client/block-editor/hooks/use-video-player/Readme.md | 2 +- .../jetpack/_inc/client/recommendations/timer/index.jsx | 2 +- .../changelog/update-react-compat-useref-requires-argument | 4 ++++ .../blocks/ai-assistant/hooks/use-ai-assistant/index.js | 2 +- .../jetpack/extensions/blocks/blogroll/use-recommendations.js | 2 +- .../jetpack/extensions/blocks/blogroll/use-subscriptions.js | 2 +- .../plugins/jetpack/extensions/blocks/image-compare/edit.js | 2 +- .../extensions/blocks/instagram-gallery/image-transition.js | 2 +- .../jetpack/extensions/blocks/map/location-search/mapkit.js | 4 ++-- .../jetpack/extensions/blocks/opentable/use-previous.js | 2 +- .../plugins/jetpack/extensions/blocks/podcast-player/edit.js | 2 +- .../extensions/blocks/story/player/expandable-sandbox.js | 4 ++-- .../extensions/blocks/story/player/lib/use-long-press.js | 4 ++-- .../jetpack/extensions/blocks/story/player/player-ui.js | 2 +- .../extended-blocks/paid-blocks/media-replace-flow.js | 2 +- .../plugins/post-publish-qr-post-panel/components/qr-post.js | 4 ++-- .../extensions/shared/components/audio-player/index.jsx | 2 +- .../extensions/shared/external-media/sources/openverse.js | 2 +- .../extensions/shared/external-media/sources/pexels.js | 2 +- projects/plugins/jetpack/extensions/shared/use-width.js | 2 +- .../changelog/update-react-compat-useref-requires-argument | 4 ++++ .../migration/src/js/components/hooks/use-migration-status.ts | 2 +- .../changelog/update-react-compat-useref-requires-argument | 4 ++++ .../plugins/protect/src/js/components/navigation/index.jsx | 2 +- 37 files changed, 61 insertions(+), 37 deletions(-) create mode 100644 projects/js-packages/connection/changelog/update-react-compat-useref-requires-argument create mode 100644 projects/packages/forms/changelog/update-react-compat-useref-requires-argument create mode 100644 projects/packages/videopress/changelog/update-react-compat-useref-requires-argument create mode 100644 projects/plugins/jetpack/changelog/update-react-compat-useref-requires-argument create mode 100644 projects/plugins/migration/changelog/update-react-compat-useref-requires-argument create mode 100644 projects/plugins/protect/changelog/update-react-compat-useref-requires-argument diff --git a/projects/js-packages/connection/changelog/update-react-compat-useref-requires-argument b/projects/js-packages/connection/changelog/update-react-compat-useref-requires-argument new file mode 100644 index 0000000000000..ff79e553a2223 --- /dev/null +++ b/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. diff --git a/projects/js-packages/connection/components/in-place-connection/index.jsx b/projects/js-packages/connection/components/in-place-connection/index.jsx index 48b6a54550d34..158ce822f0758 100644 --- a/projects/js-packages/connection/components/in-place-connection/index.jsx +++ b/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. diff --git a/projects/packages/forms/changelog/update-react-compat-useref-requires-argument b/projects/packages/forms/changelog/update-react-compat-useref-requires-argument new file mode 100644 index 0000000000000..ff79e553a2223 --- /dev/null +++ b/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. diff --git a/projects/packages/forms/package.json b/projects/packages/forms/package.json index 2c4354e320fd9..2a3b9d26daebf 100644 --- a/projects/packages/forms/package.json +++ b/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": { diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-dropdown.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-dropdown.js index bbeb044f9d266..0503daaadefb8 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-dropdown.js +++ b/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', { diff --git a/projects/packages/forms/src/blocks/contact-form/util/with-style-variables.js b/projects/packages/forms/src/blocks/contact-form/util/with-style-variables.js index c993f83f54c51..705689137dda6 100644 --- a/projects/packages/forms/src/blocks/contact-form/util/with-style-variables.js +++ b/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 ( { if ( viewKey === activeViewKey ) { diff --git a/projects/packages/forms/src/dashboard/inbox/export-modal/index.js b/projects/packages/forms/src/dashboard/inbox/export-modal/index.js index 27f16cf96a59b..1a40a15901103 100644 --- a/projects/packages/forms/src/dashboard/inbox/export-modal/index.js +++ b/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(); diff --git a/projects/packages/forms/src/dashboard/inbox/index.js b/projects/packages/forms/src/dashboard/inbox/index.js index 67816a7757b9b..982823ac1394e 100644 --- a/projects/packages/forms/src/dashboard/inbox/index.js +++ b/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 ); diff --git a/projects/packages/forms/src/dashboard/inbox/response.js b/projects/packages/forms/src/dashboard/inbox/response.js index 37f403139d9c2..5bac162dc6d38 100644 --- a/projects/packages/forms/src/dashboard/inbox/response.js +++ b/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 ) { diff --git a/projects/packages/videopress/changelog/update-react-compat-useref-requires-argument b/projects/packages/videopress/changelog/update-react-compat-useref-requires-argument new file mode 100644 index 0000000000000..ff79e553a2223 --- /dev/null +++ b/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. diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js index 6b7f8ae25ad53..37b2a756f90ac 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/player/index.native.js +++ b/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( () => { diff --git a/projects/packages/videopress/src/client/block-editor/hooks/use-video-player/Readme.md b/projects/packages/videopress/src/client/block-editor/hooks/use-video-player/Readme.md index a7cc373f4163e..c4da5393eaf7a 100644 --- a/projects/packages/videopress/src/client/block-editor/hooks/use-video-player/Readme.md +++ b/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 ( diff --git a/projects/plugins/jetpack/_inc/client/recommendations/timer/index.jsx b/projects/plugins/jetpack/_inc/client/recommendations/timer/index.jsx index fa4498aa791da..8841e4c4a5879 100644 --- a/projects/plugins/jetpack/_inc/client/recommendations/timer/index.jsx +++ b/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() ); diff --git a/projects/plugins/jetpack/changelog/update-react-compat-useref-requires-argument b/projects/plugins/jetpack/changelog/update-react-compat-useref-requires-argument new file mode 100644 index 0000000000000..f9497d4e329d9 --- /dev/null +++ b/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. diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/hooks/use-ai-assistant/index.js b/projects/plugins/jetpack/extensions/blocks/ai-assistant/hooks/use-ai-assistant/index.js index 57316fd0ccaa4..f1e74d3e047a3 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/hooks/use-ai-assistant/index.js +++ b/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. diff --git a/projects/plugins/jetpack/extensions/blocks/blogroll/use-recommendations.js b/projects/plugins/jetpack/extensions/blocks/blogroll/use-recommendations.js index 71875464c4521..18d71d422b4bc 100644 --- a/projects/plugins/jetpack/extensions/blocks/blogroll/use-recommendations.js +++ b/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 ) { diff --git a/projects/plugins/jetpack/extensions/blocks/blogroll/use-subscriptions.js b/projects/plugins/jetpack/extensions/blocks/blogroll/use-subscriptions.js index fdf64aed84e19..ca0e66f17e357 100644 --- a/projects/plugins/jetpack/extensions/blocks/blogroll/use-subscriptions.js +++ b/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 ); diff --git a/projects/plugins/jetpack/extensions/blocks/image-compare/edit.js b/projects/plugins/jetpack/extensions/blocks/image-compare/edit.js index 9b98c267b37ef..8f564c170dd4c 100644 --- a/projects/plugins/jetpack/extensions/blocks/image-compare/edit.js +++ b/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(); diff --git a/projects/plugins/jetpack/extensions/blocks/instagram-gallery/image-transition.js b/projects/plugins/jetpack/extensions/blocks/instagram-gallery/image-transition.js index c32887084259e..5ce22b3a7e475 100644 --- a/projects/plugins/jetpack/extensions/blocks/instagram-gallery/image-transition.js +++ b/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 ); diff --git a/projects/plugins/jetpack/extensions/blocks/map/location-search/mapkit.js b/projects/plugins/jetpack/extensions/blocks/map/location-search/mapkit.js index aa17af9c3fb9d..06ad73be79362 100644 --- a/projects/plugins/jetpack/extensions/blocks/map/location-search/mapkit.js +++ b/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, diff --git a/projects/plugins/jetpack/extensions/blocks/opentable/use-previous.js b/projects/plugins/jetpack/extensions/blocks/opentable/use-previous.js index a4258895385c2..29a2e1d76fa7f 100644 --- a/projects/plugins/jetpack/extensions/blocks/opentable/use-previous.js +++ b/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; diff --git a/projects/plugins/jetpack/extensions/blocks/podcast-player/edit.js b/projects/plugins/jetpack/extensions/blocks/podcast-player/edit.js index f2a5509a52553..82ba94c8b8776 100644 --- a/projects/plugins/jetpack/extensions/blocks/podcast-player/edit.js +++ b/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, diff --git a/projects/plugins/jetpack/extensions/blocks/story/player/expandable-sandbox.js b/projects/plugins/jetpack/extensions/blocks/story/player/expandable-sandbox.js index ce3c85ad911f0..d376397ab0d37 100644 --- a/projects/plugins/jetpack/extensions/blocks/story/player/expandable-sandbox.js +++ b/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; diff --git a/projects/plugins/jetpack/extensions/blocks/story/player/lib/use-long-press.js b/projects/plugins/jetpack/extensions/blocks/story/player/lib/use-long-press.js index 4def13e85da85..ae2362edffaff 100644 --- a/projects/plugins/jetpack/extensions/blocks/story/player/lib/use-long-press.js +++ b/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 => { diff --git a/projects/plugins/jetpack/extensions/blocks/story/player/player-ui.js b/projects/plugins/jetpack/extensions/blocks/story/player/player-ui.js index 73046c0c3a1b3..8dafec1da799d 100644 --- a/projects/plugins/jetpack/extensions/blocks/story/player/player-ui.js +++ b/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 ); diff --git a/projects/plugins/jetpack/extensions/extended-blocks/paid-blocks/media-replace-flow.js b/projects/plugins/jetpack/extensions/extended-blocks/paid-blocks/media-replace-flow.js index 8e94bb3645861..8ab11e95f7610 100644 --- a/projects/plugins/jetpack/extensions/extended-blocks/paid-blocks/media-replace-flow.js +++ b/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 ; } diff --git a/projects/plugins/jetpack/extensions/plugins/post-publish-qr-post-panel/components/qr-post.js b/projects/plugins/jetpack/extensions/plugins/post-publish-qr-post-panel/components/qr-post.js index b69394f68ba19..b48f9db64c6d7 100644 --- a/projects/plugins/jetpack/extensions/plugins/post-publish-qr-post-panel/components/qr-post.js +++ b/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 ); diff --git a/projects/plugins/jetpack/extensions/shared/components/audio-player/index.jsx b/projects/plugins/jetpack/extensions/shared/components/audio-player/index.jsx index 8a926d31b5052..4e9f78d70f45b 100644 --- a/projects/plugins/jetpack/extensions/shared/components/audio-player/index.jsx +++ b/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. diff --git a/projects/plugins/jetpack/extensions/shared/external-media/sources/openverse.js b/projects/plugins/jetpack/extensions/shared/external-media/sources/openverse.js index eab349692321c..db5b9b4ac09c8 100644 --- a/projects/plugins/jetpack/extensions/shared/external-media/sources/openverse.js +++ b/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(); diff --git a/projects/plugins/jetpack/extensions/shared/external-media/sources/pexels.js b/projects/plugins/jetpack/extensions/shared/external-media/sources/pexels.js index 8d95b191d8356..f3676c1ea58b5 100644 --- a/projects/plugins/jetpack/extensions/shared/external-media/sources/pexels.js +++ b/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(); diff --git a/projects/plugins/jetpack/extensions/shared/use-width.js b/projects/plugins/jetpack/extensions/shared/use-width.js index 430b22cf3b23b..8ab7cdb107b0b 100644 --- a/projects/plugins/jetpack/extensions/shared/use-width.js +++ b/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; diff --git a/projects/plugins/migration/changelog/update-react-compat-useref-requires-argument b/projects/plugins/migration/changelog/update-react-compat-useref-requires-argument new file mode 100644 index 0000000000000..ff79e553a2223 --- /dev/null +++ b/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. diff --git a/projects/plugins/migration/src/js/components/hooks/use-migration-status.ts b/projects/plugins/migration/src/js/components/hooks/use-migration-status.ts index 466a93c2733c0..0c46940c068e8 100644 --- a/projects/plugins/migration/src/js/components/hooks/use-migration-status.ts +++ b/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 = () => { diff --git a/projects/plugins/protect/changelog/update-react-compat-useref-requires-argument b/projects/plugins/protect/changelog/update-react-compat-useref-requires-argument new file mode 100644 index 0000000000000..ff79e553a2223 --- /dev/null +++ b/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. diff --git a/projects/plugins/protect/src/js/components/navigation/index.jsx b/projects/plugins/protect/src/js/components/navigation/index.jsx index 083c1f2fdaa29..bd30dfbdad964 100644 --- a/projects/plugins/protect/src/js/components/navigation/index.jsx +++ b/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' ),