How to improve React performance on Replit

1// Before: re-renders on every parent state change
2function UserCard({ name, email }) {
3  return (
4    <div className="p-4 border rounded">
5      <h3 className="font-bold">{name}</h3>
6      <p className="text-gray-600">{email}</p>
7    </div>
8  );
9}
10
11// After: only re-renders when name or email actually change
12const UserCard = React.memo(function UserCard({ name, email }) {
13  return (
14    <div className="p-4 border rounded">
15      <h3 className="font-bold">{name}</h3>
16      <p className="text-gray-600">{email}</p>
17    </div>
18  );
19});

1import { useState, useMemo, useCallback } from 'react';
2
3function UserList({ users }) {
4  const [filter, setFilter] = useState('');
5  const [sortBy, setSortBy] = useState('name');
6
7  // Memoize filtered and sorted list
8  const displayUsers = useMemo(() => {
9    return users
10      .filter(u => u.name.toLowerCase().includes(filter.toLowerCase()))
11      .sort((a, b) => a[sortBy].localeCompare(b[sortBy]));
12  }, [users, filter, sortBy]);
13
14  // Stable function reference for child components
15  const handleSelect = useCallback((userId) => {
16    console.log('Selected:', userId);
17  }, []);
18
19  return (
20    <div>
21      <input value={filter} onChange={e => setFilter(e.target.value)} />
22      {displayUsers.map(user => (
23        <UserCard key={user.id} {...user} onSelect={handleSelect} />
24      ))}
25    </div>
26  );
27}

1import { Suspense, lazy } from 'react';
2import { BrowserRouter, Routes, Route } from 'react-router-dom';
3
4// Lazy load route components
5const Dashboard = lazy(() => import('./pages/Dashboard'));
6const Settings = lazy(() => import('./pages/Settings'));
7const Analytics = lazy(() => import('./pages/Analytics'));
8
9function App() {
10  return (
11    <BrowserRouter>
12      <Suspense fallback={<div className="p-8">Loading...</div>}>
13        <Routes>
14          <Route path="/" element={<Dashboard />} />
15          <Route path="/settings" element={<Settings />} />
16          <Route path="/analytics" element={<Analytics />} />
17        </Routes>
18      </Suspense>
19    </BrowserRouter>
20  );
21}

1// vite.config.js
2import { defineConfig } from 'vite';
3import react from '@vitejs/plugin-react';
4
5export default defineConfig({
6  plugins: [react()],
7  build: {
8    target: 'es2020',
9    minify: 'esbuild',
10    sourcemap: false,
11    rollupOptions: {
12      output: {
13        manualChunks: {
14          vendor: ['react', 'react-dom'],
15          router: ['react-router-dom']
16        }
17      }
18    }
19  },
20  server: {
21    host: '0.0.0.0',
22    port: 5173
23  }
24});

1# .replit
2entrypoint = "src/main.jsx"
3run = "npm run dev"
4
5[deployment]
6build = "npm run build"
7run = "npx serve dist -s -l 3000"
8deploymentTarget = "cloudrun"
9
10[[ports]]
11localPort = 3000
12externalPort = 80

1// Install in Shell: npm install react-window
2import { FixedSizeList } from 'react-window';
3
4function VirtualUserList({ users }) {
5  const Row = ({ index, style }) => (
6    <div style={style} className="flex items-center p-2 border-b">
7      <span className="font-medium">{users[index].name}</span>
8      <span className="ml-4 text-gray-500">{users[index].email}</span>
9    </div>
10  );
11
12  return (
13    <FixedSizeList
14      height={600}
15      itemCount={users.length}
16      itemSize={48}
17      width="100%"
18    >
19      {Row}
20    </FixedSizeList>
21  );
22}