From a0699799b4b2d0322572385c2a79143ff8e58115 Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Thu, 9 Apr 2026 10:12:48 +0200
Subject: [PATCH 1/2] Dataviews: remove unneeded ref callbacks

---
 .../components/dataviews-layouts/picker-grid/index.tsx    | 8 ++------
 .../components/dataviews-layouts/picker-table/index.tsx   | 8 ++------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-layouts/picker-grid/index.tsx b/packages/dataviews/src/components/dataviews-layouts/picker-grid/index.tsx
index c293a6515676fa..c3a8392ece5c82 100644
--- a/packages/dataviews/src/components/dataviews-layouts/picker-grid/index.tsx
+++ b/packages/dataviews/src/components/dataviews-layouts/picker-grid/index.tsx
@@ -78,14 +78,10 @@ function GridItem< Item >( {
 }: GridItemProps< Item > ) {
 	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const id = getItemId( item );
-	const elementRef = useRef< HTMLElement | null >( null );
+	const elementRef = useRef< HTMLButtonElement >( null );
 
 	const isSelected = selection.includes( id );
 
-	const setElementRef = ( element: HTMLElement | null ) => {
-		elementRef.current = element;
-	};
-
 	useIntersectionObserver( elementRef, posinset );
 
 	const renderedMediaField = mediaField?.render ? (
@@ -102,7 +98,7 @@ function GridItem< Item >( {
 
 	return (
 		<Composite.Item
-			ref={ setElementRef }
+			ref={ elementRef }
 			aria-label={
 				titleField
 					? titleField.getValue( { item } ) || __( '(no title)' )
diff --git a/packages/dataviews/src/components/dataviews-layouts/picker-table/index.tsx b/packages/dataviews/src/components/dataviews-layouts/picker-table/index.tsx
index 971bdabb98ca8a..8735023d9f7c1d 100644
--- a/packages/dataviews/src/components/dataviews-layouts/picker-table/index.tsx
+++ b/packages/dataviews/src/components/dataviews-layouts/picker-table/index.tsx
@@ -100,11 +100,7 @@ function TableRow< Item >( {
 	const isSelected = selection.includes( id );
 
 	const [ isHovered, setIsHovered ] = useState( false );
-	const elementRef = useRef< HTMLElement | null >( null );
-
-	const setElementRef = ( element: HTMLElement | null ) => {
-		elementRef.current = element;
-	};
+	const elementRef = useRef< HTMLButtonElement >( null );
 
 	useIntersectionObserver( elementRef, posinset );
 	const {
@@ -129,7 +125,7 @@ function TableRow< Item >( {
 	return (
 		<Composite.Item
 			key={ id }
-			ref={ setElementRef }
+			ref={ elementRef }
 			render={ ( { children, ...props } ) => (
 				<tr
 					className={ clsx( 'dataviews-view-table__row', {

From d1677a2c977cc6b51548d288812d6144e3a425a3 Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Thu, 9 Apr 2026 11:16:19 +0200
Subject: [PATCH 2/2] Add changelog entry

---
 packages/dataviews/CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index 23a6a959c2063c..bfb666bb0922d6 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -10,6 +10,10 @@
 
 - DataViews: Fix `compact` density clipping and remove top/bottom padding. [#77054](https://github.com/WordPress/gutenberg/pull/77054)
 
+### Code Quality
+
+- DataViewsPicker: Remove unnecessary ref callbacks in grid and table layouts. [#77179](https://github.com/WordPress/gutenberg/pull/77179)
+
 ## 14.0.0 (2026-04-01)
 
 ### Breaking Changes