Deployment and Performance Optimization

Level: Beginner

ℹ️ What You'll Learn

• Production builds with npm run build
• Code splitting and lazy loading
• Bundle analysis and optimization
• Performance metrics (Lighthouse, Web Vitals)
• Deploying to hosting (Vercel, Netlify, etc.)
• Environment variables and secrets
• CI/CD pipelines (GitHub Actions, etc.)
• Monitoring production SMS apps

Why This Matters

Deployment and Performance Optimization is part of building maintainable React applications. You will use it when creating student dashboards, forms, tables, API-connected screens, routing flows, and reusable UI components.

The Problem

Beginners often write React code that works for a small demo but becomes difficult when data, forms, API calls, and reusable components grow. This lesson explains Deployment and Performance Optimization in a way that helps you build predictable UI for real .NET Web API projects.

Building for Production

Create Production Build

npm run build

This:

• Minifies code
• Removes dev warnings
• Optimizes bundle
• Creates build/ folder

Check Bundle Size

npm run build -- --stats
# or use webpack-bundle-analyzer

Aim for < 150KB main bundle (gzipped).

Optimization Techniques

1. Code Splitting (Lazy Loading)

import { lazy, Suspense } from 'react';

const StudentDetail = lazy(() => import('./StudentDetail'));
const TeacherList = lazy(() => import('./TeacherList'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/students/:id" element={<StudentDetail />} />
        <Route path="/teachers" element={<TeacherList />} />
      </Routes>
    </Suspense>
  );
}

Only loads code when needed.

2. Image Optimization

// ❌ Large images
<img src="large-school-photo.png" />

// ✓ Optimized
<img 
  src="school-photo.webp" 
  alt="School building"
  width="800"
  height="600"
  loading="lazy"
/>

// Use image library
import { Image } from 'next/image';

<Image
  src="/school.png"
  alt="School"
  width={800}
  height={600}
/>

3. Remove Unused Dependencies

npm audit
npm prune

Use tools like depcheck to find unused packages.

4. Memoization

const StudentCard = React.memo(function StudentCard({ student }) {
  return <div>{student.name}</div>;
});

5. Virtual Lists for Large Lists

import { FixedSizeList } from 'react-window';

function StudentList({ students }) {
  return (
    <FixedSizeList
      height={600}
      itemCount={students.length}
      itemSize={50}
      width="100%"
    >
      {({ index, style }) => (
        <div style={style}>
          {students[index].name}
        </div>
      )}
    </FixedSizeList>
  );
}

Renders only visible items.

Environment Variables

.env File

REACT_APP_API_BASE=http://localhost:5000/api
REACT_APP_ENV=development

Use in code:

const API = process.env.REACT_APP_API_BASE;

Different Environments

.env.development
REACT_APP_API_BASE=http://localhost:5000/api

.env.production
REACT_APP_API_BASE=https://api.nexcoding.in

Automatically used during build.

Deployment Platforms

Vercel (Recommended for Next.js)

npm install -g vercel
vercel

Auto-deploys on git push.

Netlify

npm install -g netlify-cli
netlify deploy --prod --dir=build

GitHub Pages

{
  "homepage": "https://username.github.io/react-app",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

npm run deploy

Azure/AWS/GCP

Provide your own hosting for complete control.

CI/CD Pipeline

GitHub Actions Example

# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      
      - run: npm install
      - run: npm test
      - run: npm run build
      
      - name: Deploy
        uses: vercel/vercel-action@master
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}

Performance Monitoring

Web Vitals

import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

getCLS(console.log); // Cumulative Layout Shift
getFID(console.log); // First Input Delay
getFCP(console.log); // First Contentful Paint
getLCP(console.log); // Largest Contentful Paint
getTTFB(console.log); // Time to First Byte

Google Lighthouse

• DevTools > Lighthouse tab
• Generates performance report
• Shows optimization suggestions

Security Checklist

Before deploying:

• Remove console.log statements
• Use HTTPS
• Set Content Security Policy headers
• Enable CORS on backend only
• Keep dependencies updated
• Use environment variables for secrets
• Implement rate limiting on API
• Add authentication/authorization

Monitoring in Production

Error Tracking (Sentry)

npm install @sentry/react @sentry/tracing

import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: process.env.REACT_APP_SENTRY_DSN,
  environment: process.env.REACT_APP_ENV,
  tracesSampleRate: 1.0
});

const App = () => <Routes>{/* */}</Routes>;
export default Sentry.withProfiler(App);

Analytics (Google Analytics)

npm install google-analytics-react

Track user behavior, page views, errors.

Pre-Deployment Checklist

[ ] All tests pass
[ ] No console errors/warnings
[ ] Performance optimized (< 150KB)
[ ] Images optimized
[ ] Bundle size analyzed
[ ] Environment variables set
[ ] API endpoints verified
[ ] Error handling works
[ ] Loading states functional
[ ] Responsive design verified
[ ] SEO tags added (if needed)
[ ] Security headers configured
[ ] HTTPS enabled
[ ] Monitoring configured
[ ] Backup/rollback plan ready

Production Deployment Process

1. Test locally

   npm run build
   npm install -g serve
   serve -s build

2. Run CI/CD checks

   • Tests pass
   • Code review approved
   • Coverage acceptable

3. Deploy to staging

   • Test all features
   • Load testing
   • User acceptance

4. Deploy to production

   • Time off-peak
   • Monitor errors/performance
   • Have rollback ready

5. Monitor post-deployment

   • Check error logs
   • Monitor performance
   • User reports

Key Takeaways

• Build for production with npm run build
• Optimize bundle size and images
• Use code splitting for large apps
• Monitor performance with DevTools
• Deploy with CI/CD
• Track errors in production
• Version history (next article)

⚠️ Deployment Mistakes

1. Deploying without testing — Always test locally first
2. Hardcoded API URLs — Use environment variables
3. No rollback plan — Be able to revert quickly
4. Not monitoring — Can't see if production breaks
5. Large bundle — Slows down initial load

💡 Zero-Downtime Deployment

1. Deploy to separate server
2. Test thoroughly
3. Switch traffic using load balancer
4. Keep old version running for quick rollback

🤖Use AI to Learn Faster

Use ChatGPT, Claude, or Copilot to go deeper on Deployment and Optimization. Try these prompts:

• "What does code splitting achieve?"
• "Why should you use environment variables?"
• "How do you monitor errors in production?"
• "Quiz me on React deployment"

💡 Tip: After reading this article, paste your own code into AI and ask "What could go wrong here and why?" — fastest way to find edge cases and deepen understanding.

Quick Definitions

• Deployment and Performance Optimization - The main React concept explained in this lesson.
• Component - A reusable function that returns UI.
• Props/state/effects - Core React ideas used to pass data, remember data, and run side effects.
• Real project usage - How this appears in forms, dashboards, routes, and API-connected pages.

Common Mistakes

• Copying React code without understanding data flow
• Mutating arrays or objects directly instead of creating new values
• Forgetting keys, dependencies, loading states, or error states where needed
• Putting too much logic in one component
• Not testing the screen with realistic School Management System data

Practice Task

Create a small React example using Deployment and Performance Optimization. Keep it focused on one School Management System screen.

Suggested practice:

1. Build a small component or page for students, attendance, marks, or fees.
2. Pass realistic data into the component.
3. Add one success state and one empty/error state where relevant.
4. Explain the data flow in your own words.
5. Rebuild the same example once without looking at the article.

Quick Revision

Question	Answer
What is the main idea?	Understand and apply Deployment and Performance Optimization in React.
Where is it used?	Student dashboards, forms, tables, routes, and API-connected screens.
What should beginners focus on?	Clear components, predictable data flow, and small examples.
What is the best debugging habit?	Check props, state, render output, and browser console step by step.

🎯 How would you explain Deployment and Performance Optimization in an interview?

Deployment and Performance Optimization is a React concept used to build clear, reusable, and predictable user interfaces. I would explain the problem it solves, show a small component example, and mention a common mistake beginners should avoid.

🎯 Where is this used in a real React project?

It is used in screens like student lists, admission forms, attendance dashboards, marks reports, routing pages, and API-connected admin panels.

Next Article

React Version History and Updates ->