Список сделали по подсказке ИИ

package.json

@@ -11,8 +11,7 @@
   },
   "dependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react-dom": "^19.1.0"
-    "react-intl": "^10.1.13"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
@@ -23,6 +22,7 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
+    "sass-embedded": "^1.99.0",
     "vite": "^6.3.5"
   }
 }

src/App.css

@@ -0,0 +1,15 @@
+.container {
+/*    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;*/
+    height: 500px;
+    overflow: auto;
+    border: 1px solid black;
+}
+.item {
+    font-size: 16pt;
+    border: 1px dotted gray;
+    /*margin: 5px 10px;
+    padding: 10px;*/
+    border-radius: 5px;
+}

src/App.jsx

@@ -1,30 +1,51 @@
-import { IntlProvider,
+import { useEffect, useRef, useState } from 'react';
-        FormattedMessage,
+import styles from './App.module.scss';
-        FormattedNumber,
+
-        FormattedDate,
+const InfiniteList = () => {
-        FormattedTime,
+  const [items, setItems] = useState([...Array(20).keys()]); // Initial data
-        FormattedDateTimeRange } from 'react-intl'
+  const loaderRef = useRef(null);
-import messageRu from './translations/ru.json'
+
-import messageEn from './translations/en.json'
+  const loadMore = () => {
+    setItems((prev) => [...prev, ...Array(10).keys()].map((_, i) => prev.length + i));
+  };
+
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting) {
+        loadMore(); // Load next batch when the loader is seen
+      }
+    });
+
+    if (loaderRef.current) observer.observe(loaderRef.current);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <ul>
+      {items.map(item => <li key={item} className={ styles.item }>Item {item}</li>)}
+      <div ref={loaderRef}>Loading more...</div>
+    </ul>
+  );
+};
 
 function App() {
-    const locale = 'ru';
+    const generatedBigDataSet = () => {
-    const messages = messageEn;
+        return Array.from({ length: 100 }, (_, index) => ({
+            id: index,
+            name: `Элемент № ${index}`,
+            value: Math.floor(Math.random() * 1000)
+        }))
+    }
+    const [data] = useState(generatedBigDataSet);
     
 	return (
 		<>
-            <IntlProvider locale={locale} messages={messages}>
+            <div>
-			    <h1><FormattedMessage id='app.welcome' /></h1>
+                <h2>Визуализация большого списка</h2>
-                <h2><FormattedMessage id='app.userGreeting' values={{ name: <u>Alex</u> }} /></h2>
+                <div className={ styles.container }>
-                <p><FormattedMessage id='app.notifications' values= {{count: 25}} /></p>
+                <InfiniteList />
-                <p><FormattedMessage id='app.lastLogin' values={{ date: new Date(), time: new Date()}} /></p>
+                </div>
-                <p><FormattedNumber value={ 999.99 } style='currency' currency='RUB' /></p>
+            </div>
-                <p><FormattedNumber value={0.56} style='percent' /></p>
-                <p><FormattedNumber value={1234.567} minimumFractionDigits={2} maximumFractionDigits={2} /></p>
-                <p><FormattedDate value={new Date()} weekday='long' /></p>
-                <p><FormattedTime value={new Date()} hour='2-digit' minute='2-digit' second='2-digit' /></p>
-                <p><FormattedDateTimeRange from={new Date(2026,6,1,10,0)} to={new Date(2026,6,10,9,0)} /></p>
-            </IntlProvider>
 		</>
 	)
 }

src/translations/en.json

@@ -1,6 +0,0 @@
-{
-    "app.welcome": "welcome to React application",
-    "app.userGreeting": "Hello, {name}",
-    "app.notifications": "You have {count, plural, one {# a notification} few {# are notifications} many {# уведомлений} other {# уведомления}}",
-    "app.lastLogin": "Last login was {date,date,long} in {time,time,short}"
-}

src/translations/ru.json

@@ -1,6 +0,0 @@
-{
-    "app.welcome": "добро пожаловать в приложение React",
-    "app.userGreeting": "Здравствуйте, {name}",
-    "app.notifications": "У вас {count, plural, one {# уведомление} few {# уведомления} many {# уведомлений} other {# уведомления}}",
-    "app.lastLogin": "Последний вход был {date,date,long} в {time,time,short}"
-}