diff --git a/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/React/OrderHistory.tsx b/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/React/OrderHistory.tsx
index dbd4ca553348..e31cf4f6fd3b 100644
--- a/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/React/OrderHistory.tsx
+++ b/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/React/OrderHistory.tsx
@@ -13,7 +13,7 @@ interface OrderHistoryProps {
 }
 
 const OrderHistory = ({ productId }: OrderHistoryProps) => {
-  const [orderHistoryStore, setOrderHistoryStore] = useState<CustomStore | null>(null);
+  const [orderHistoryStore, setOrderHistoryStore] = useState<CustomStore | undefined>(undefined);
 
   useEffect(() => {
     if (productId) {
diff --git a/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/ReactJs/OrderHistory.js b/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/ReactJs/OrderHistory.js
index 003e79f6cf49..5079a9741da0 100644
--- a/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/ReactJs/OrderHistory.js
+++ b/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/ReactJs/OrderHistory.js
@@ -11,7 +11,7 @@ import { createStore } from 'devextreme-aspnet-data-nojquery';
 
 const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridAdvancedMasterDetailView';
 const OrderHistory = ({ productId }) => {
-  const [orderHistoryStore, setOrderHistoryStore] = useState(null);
+  const [orderHistoryStore, setOrderHistoryStore] = useState(undefined);
   useEffect(() => {
     if (productId) {
       const newOrderHistoryStore = createStore({
diff --git a/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Vue/OrderHistory.vue b/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Vue/OrderHistory.vue
index 53c3e08ae2c2..cffd1093fcb2 100644
--- a/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Vue/OrderHistory.vue
+++ b/apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Vue/OrderHistory.vue
@@ -55,7 +55,7 @@ const props = defineProps<{
 
 const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridAdvancedMasterDetailView';
 
-const orderHistoryStore = computed(() => (props.productId === null ? null : {
+const orderHistoryStore = computed(() => (props.productId === null ? undefined : {
   store: createStore({
     key: 'OrderID',
     loadParams: { ProductID: props.productId },
diff --git a/apps/demos/Demos/DataGrid/SignalRService/React/App.tsx b/apps/demos/Demos/DataGrid/SignalRService/React/App.tsx
index d14490d1155a..0feaff547e48 100644
--- a/apps/demos/Demos/DataGrid/SignalRService/React/App.tsx
+++ b/apps/demos/Demos/DataGrid/SignalRService/React/App.tsx
@@ -9,7 +9,7 @@ import ChangeCell from './ChangeCell.tsx';
 
 const App = () => {
   const [connectionStarted, setConnectionStarted] = useState(false);
-  const [dataSource, setDataSource] = useState<CustomStore | null>(null);
+  const [dataSource, setDataSource] = useState<CustomStore | undefined>(undefined);
 
   useEffect(() => {
     const hubConnection = new HubConnectionBuilder()
diff --git a/apps/demos/Demos/DataGrid/SignalRService/ReactJs/App.js b/apps/demos/Demos/DataGrid/SignalRService/ReactJs/App.js
index fac794c12d35..45cff4c33d52 100644
--- a/apps/demos/Demos/DataGrid/SignalRService/ReactJs/App.js
+++ b/apps/demos/Demos/DataGrid/SignalRService/ReactJs/App.js
@@ -7,7 +7,7 @@ import ChangeCell from './ChangeCell.js';
 
 const App = () => {
   const [connectionStarted, setConnectionStarted] = useState(false);
-  const [dataSource, setDataSource] = useState(null);
+  const [dataSource, setDataSource] = useState(undefined);
   useEffect(() => {
     const hubConnection = new HubConnectionBuilder()
       .withUrl('https://js.devexpress.com/Demos/NetCore/liveUpdateSignalRHub', {
diff --git a/apps/demos/Demos/DataGrid/SignalRService/Vue/App.vue b/apps/demos/Demos/DataGrid/SignalRService/Vue/App.vue
index bba9af062ec0..ef45628141c2 100644
--- a/apps/demos/Demos/DataGrid/SignalRService/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/SignalRService/Vue/App.vue
@@ -66,7 +66,7 @@ import PriceCell from './PriceCell.vue';
 import ChangeCell from './ChangeCell.vue';
 
 const connectionStarted = ref(false);
-const dataSource = ref<CustomStore | null>(null);
+const dataSource = ref<CustomStore | undefined>(undefined);
 
 onMounted(() => {
   const hubConnection = new HubConnectionBuilder()
diff --git a/apps/demos/Demos/DataGrid/WebAPIService/React/MasterDetailGrid.tsx b/apps/demos/Demos/DataGrid/WebAPIService/React/MasterDetailGrid.tsx
index 03408c012b93..6b133f018b5b 100644
--- a/apps/demos/Demos/DataGrid/WebAPIService/React/MasterDetailGrid.tsx
+++ b/apps/demos/Demos/DataGrid/WebAPIService/React/MasterDetailGrid.tsx
@@ -18,7 +18,7 @@ const getMasterDetailGridDataSource = (id: number) => ({
 });
 
 const MasterDetailGrid = (props: DataGridTypes.MasterDetailTemplateData) => {
-  const [dataSource, setDataSource] = useState<DataSourceOptions | null>(null);
+  const [dataSource, setDataSource] = useState<DataSourceOptions | undefined>(undefined);
 
   useEffect(() => {
     const masterDetailDataSource = getMasterDetailGridDataSource(props.data.key);
diff --git a/apps/demos/Demos/DataGrid/WebAPIService/ReactJs/MasterDetailGrid.js b/apps/demos/Demos/DataGrid/WebAPIService/ReactJs/MasterDetailGrid.js
index 4002ed16b28d..3028e2841941 100644
--- a/apps/demos/Demos/DataGrid/WebAPIService/ReactJs/MasterDetailGrid.js
+++ b/apps/demos/Demos/DataGrid/WebAPIService/ReactJs/MasterDetailGrid.js
@@ -13,7 +13,7 @@ const getMasterDetailGridDataSource = (id) => ({
   }),
 });
 const MasterDetailGrid = (props) => {
-  const [dataSource, setDataSource] = useState(null);
+  const [dataSource, setDataSource] = useState(undefined);
   useEffect(() => {
     const masterDetailDataSource = getMasterDetailGridDataSource(props.data.key);
     setDataSource(masterDetailDataSource);
diff --git a/apps/demos/Demos/PivotGrid/DrillDown/React/App.tsx b/apps/demos/Demos/PivotGrid/DrillDown/React/App.tsx
index 1ee1522e8074..055fcdbd6c4c 100644
--- a/apps/demos/Demos/PivotGrid/DrillDown/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/DrillDown/React/App.tsx
@@ -15,7 +15,7 @@ import { sales } from './data.ts';
 
 const App = () => {
   const [popupTitle, setPopupTitle] = useState('');
-  const [drillDownDataSource, setDrillDownDataSource] = useState<DataSource | null>(null);
+  const [drillDownDataSource, setDrillDownDataSource] = useState<DataSource | undefined>(undefined);
   const [popupVisible, setPopupVisible] = useState(false);
   const dataGridRef = useRef<DataGridRef>(null);
 
diff --git a/apps/demos/Demos/PivotGrid/DrillDown/ReactJs/App.js b/apps/demos/Demos/PivotGrid/DrillDown/ReactJs/App.js
index 3e3843d0882d..25c0e925a192 100644
--- a/apps/demos/Demos/PivotGrid/DrillDown/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/DrillDown/ReactJs/App.js
@@ -7,7 +7,7 @@ import { sales } from './data.js';
 
 const App = () => {
   const [popupTitle, setPopupTitle] = useState('');
-  const [drillDownDataSource, setDrillDownDataSource] = useState(null);
+  const [drillDownDataSource, setDrillDownDataSource] = useState(undefined);
   const [popupVisible, setPopupVisible] = useState(false);
   const dataGridRef = useRef(null);
   const onCellClick = useCallback((e) => {