Clean • Professional
Ques1. What does “building for production” mean in React?
Ans: Building for production means optimizing your React app for performance and efficiency before deploying it to users.
It includes:
npm run build.Ques2. How do you create a production build in React?
Ans: Run the command:
npm run build
This generates a build/ folder containing optimized files (HTML, JS, CSS, and assets) ready for deployment.
Ques3. Why is minification important in production builds?
Ans: Minification removes unnecessary spaces, comments, and unused code, reducing file size and improving page load times.
Ques4. What is code splitting in React?
Ans: Code splitting breaks your app into smaller bundles so users only download what they need.
It improves performance by reducing initial load time.
Example using React’s lazy and Suspense:
const About = React.lazy(() => import('./About'));
Ques5. How does React handle environment variables?
Ans: React allows you to define environment variables in .env files:
REACT_APP_API_URL=https://api.example.com
These are accessed using process.env.REACT_APP_API_URL.
Ques6. Why use environment variables in React?
Ans: They help manage different configurations for development, staging, and production without changing code.
Q7. What are common environment variable files in React?
.env.development.env.production.env.testReact automatically picks the correct file based on the build environment.
Ques8. What are popular platforms for deploying React apps?
Ques9. How do you deploy a React app to Netlify?
npm run buildbuild/Ques10. How do you deploy a React app to Vercel?
Ques11. What are the advantages of using GitHub Pages for deployment?
Ques12. How do you set up GitHub Actions for CI/CD in React?
.github/workflows/deploy.yml file.Example:
name: Build and Deploy
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: npm install
- run: npm run build
Ques13. What is CI/CD in React deployment?
Ans: CI/CD (Continuous Integration/Continuous Deployment) automates testing, building, and deploying React apps every time code changes — ensuring consistency and faster releases.
Ques14. What is bundle optimization in React?
Ans: Bundle optimization means reducing the size of JavaScript bundles using:
Ques15. What is Tree Shaking in React?
Ans: Tree Shaking automatically removes unused code from the final bundle using tools like Webpack or Rollup.
Ques16. What is lazy loading in React?
Ans: Lazy loading delays loading of components until they are needed, improving performance and reducing initial bundle size.
Example:
const Dashboard = React.lazy(() => import('./Dashboard'));
Ques17. What is React’s Suspense used for in lazy loading?
Ans: Suspense provides a fallback (like a loader) while waiting for a lazy-loaded component.
Example:
<Suspense fallback={<div>Loading...</div>}>
<Dashboard />
</Suspense>
Ques18. How can you optimize images in React for performance?
Ques19. How can you manage large state efficiently in React?
useMemo or useCallback.Ques20. What are coding best practices for scalable React apps?
components, hooks, pages, etc.)Ques21. Why is folder structure important in React?
Ans: A consistent project structure improves maintainability, scalability, and team collaboration. Example:
src/
┣ components/
┣ hooks/
┣ pages/
┣ utils/
┗ App.js
Ques22. How do you handle runtime errors gracefully in production?
Ans: Use React Error Boundaries to catch and handle component-level errors without crashing the app:
componentDidCatch(error, info) {
console.log(error, info);
}
Ques23. What tools can be used for monitoring deployed React apps?
Ques24. What is the difference between Development and Production mode in React?
| Feature | Development | Production |
|---|---|---|
| Debugging | Enabled | Disabled |
| Performance | Slower | Optimized |
| Warnings | Visible | Removed |
| Bundle Size | Larger | Minified |
Ques25. How can you reduce re-renders and improve performance in React production?
Ans:
React.memo() for pure components.useCallback() for stable function references.