Commit b700320e26 for handsontable.com

commit b700320e26ef48877beff677662d1156f75e72e2
Author: Szymon Dolnik <42141039+Haxikowy@users.noreply.github.com>
Date:   Mon May 18 13:55:32 2026 +0200

    DEV-1688: Fix React examples page/sort change resetting to page 1 (#12595)

diff --git a/docs/content/recipes/data-management/load-data-rest-api/react/example3.jsx b/docs/content/recipes/data-management/load-data-rest-api/react/example3.jsx
index b12d5dc076..7cd61cf006 100644
--- a/docs/content/recipes/data-management/load-data-rest-api/react/example3.jsx
+++ b/docs/content/recipes/data-management/load-data-rest-api/react/example3.jsx
@@ -1,13 +1,14 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { HotTable } from '@handsontable/react-wrapper';
 import { registerAllModules } from 'handsontable/registry';

 registerAllModules();

+const pagination = { pageSize: 5 };
+
 const ExampleComponent = () => {
   const cachedRowsRef = useRef(null);
-  const [status, setStatus] = useState('Loading...');
-  const [statusColor, setStatusColor] = useState('#202124');
+  const statusRef = useRef(null);

   const loadAllRows = useCallback(async (signal) => {
     if (cachedRowsRef.current !== null) {
@@ -70,26 +71,30 @@ const ExampleComponent = () => {
   );

   const beforeDataProviderFetch = useCallback((params) => {
-    if (!params.skipLoading) {
-      setStatus('Loading...');
-      setStatusColor('#202124');
-    }
+    if (params.skipLoading || !statusRef.current) return;
+    statusRef.current.textContent = 'Loading...';
+    statusRef.current.style.color = '#202124';
   }, []);

   const afterDataProviderFetch = useCallback(() => {
-    setStatus('Loaded from REST API via dataProvider.');
-    setStatusColor('#202124');
+    if (!statusRef.current) return;
+    statusRef.current.textContent = 'Loaded from REST API via dataProvider.';
+    statusRef.current.style.color = '#202124';
   }, []);

   const afterDataProviderFetchError = useCallback((error) => {
-    setStatus(`Error: ${error.message}`);
-    setStatusColor('#c62828');
+    if (!statusRef.current) return;
+    statusRef.current.textContent = `Error: ${error.message}`;
+    statusRef.current.style.color = '#c62828';
   }, []);

   return (
     <div>
-      <p style={{ margin: '0 0 8px', fontFamily: 'Arial, sans-serif', fontSize: '14px', color: statusColor }}>
-        {status}
+      <p
+        ref={statusRef}
+        style={{ margin: '0 0 8px', fontFamily: 'Arial, sans-serif', fontSize: '14px', color: '#202124' }}
+      >
+        Loading...
       </p>
       <HotTable
         dataProvider={dataProvider}
@@ -102,7 +107,7 @@ const ExampleComponent = () => {
           { data: 'city', type: 'text', width: 140, readOnly: true },
           { data: 'company', type: 'text', width: 180, readOnly: true },
         ]}
-        pagination={{ pageSize: 5 }}
+        pagination={pagination}
         columnSorting={true}
         emptyDataState={true}
         rowHeaders={true}
diff --git a/docs/content/recipes/data-management/load-data-rest-api/react/example3.tsx b/docs/content/recipes/data-management/load-data-rest-api/react/example3.tsx
index cfc883bf3e..300ba2e18f 100644
--- a/docs/content/recipes/data-management/load-data-rest-api/react/example3.tsx
+++ b/docs/content/recipes/data-management/load-data-rest-api/react/example3.tsx
@@ -1,9 +1,11 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { HotTable } from '@handsontable/react-wrapper';
 import { registerAllModules } from 'handsontable/registry';

 registerAllModules();

+const pagination = { pageSize: 5 };
+
 type ApiUser = {
   id: number;
   name: string;
@@ -26,8 +28,7 @@ type SortDescriptor = { prop: string; order: 'asc' | 'desc' } | null;

 const ExampleComponent = () => {
   const cachedRowsRef = useRef<UserRow[] | null>(null);
-  const [status, setStatus] = useState('Loading...');
-  const [statusColor, setStatusColor] = useState('#202124');
+  const statusRef = useRef<HTMLParagraphElement | null>(null);

   const loadAllRows = useCallback(async (signal: AbortSignal): Promise<UserRow[]> => {
     if (cachedRowsRef.current !== null) {
@@ -93,26 +94,30 @@ const ExampleComponent = () => {
   );

   const beforeDataProviderFetch = useCallback((params: { skipLoading?: boolean }) => {
-    if (!params.skipLoading) {
-      setStatus('Loading...');
-      setStatusColor('#202124');
-    }
+    if (params.skipLoading || !statusRef.current) return;
+    statusRef.current.textContent = 'Loading...';
+    statusRef.current.style.color = '#202124';
   }, []);

   const afterDataProviderFetch = useCallback(() => {
-    setStatus('Loaded from REST API via dataProvider.');
-    setStatusColor('#202124');
+    if (!statusRef.current) return;
+    statusRef.current.textContent = 'Loaded from REST API via dataProvider.';
+    statusRef.current.style.color = '#202124';
   }, []);

   const afterDataProviderFetchError = useCallback((error: Error) => {
-    setStatus(`Error: ${error.message}`);
-    setStatusColor('#c62828');
+    if (!statusRef.current) return;
+    statusRef.current.textContent = `Error: ${error.message}`;
+    statusRef.current.style.color = '#c62828';
   }, []);

   return (
     <div>
-      <p style={{ margin: '0 0 8px', fontFamily: 'Arial, sans-serif', fontSize: '14px', color: statusColor }}>
-        {status}
+      <p
+        ref={statusRef}
+        style={{ margin: '0 0 8px', fontFamily: 'Arial, sans-serif', fontSize: '14px', color: '#202124' }}
+      >
+        Loading...
       </p>
       <HotTable
         dataProvider={dataProvider}
@@ -125,7 +130,7 @@ const ExampleComponent = () => {
           { data: 'city', type: 'text', width: 140, readOnly: true },
           { data: 'company', type: 'text', width: 180, readOnly: true },
         ]}
-        pagination={{ pageSize: 5 }}
+        pagination={pagination}
         columnSorting={true}
         emptyDataState={true}
         rowHeaders={true}