Managing large applications in React

Introduction

Managing large applications helps keep your code organized and easy to understand. It makes adding new features and fixing bugs simpler and faster.

When your React app grows beyond a few components and files.

When multiple developers work on the same project.

When you want to reuse parts of your app in different places.

When you need to keep your app fast and easy to maintain.

When you want to separate concerns like UI, data, and logic.

Syntax

React

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import HomePage from './pages/HomePage';
import UserPage from './pages/UserPage';

function App() {
  return (
    <Router>
      <Header />
      <Routes>
        <Route path='/' element={<HomePage />} />
        <Route path='/user' element={<UserPage />} />
      </Routes>
    </Router>
  );
}

export default App;

Use folders to separate components, pages, and utilities.

Use routing to manage different screens or pages in your app.

Examples

This folder structure separates UI parts, pages, and helper code.

React

src/
  components/
    Button.jsx
    Header.jsx
  pages/
    HomePage.jsx
    UserPage.jsx
  utils/
    api.js
    helpers.js
  App.jsx

Keep data fetching inside page components or custom hooks to separate logic.

React

import React, { useState, useEffect } from 'react';

function UserPage() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(data => setUser(data));
  }, []);

  if (!user) return <p>Loading...</p>;

  return <div>Welcome, {user.name}!</div>;
}

Create small reusable components for buttons, inputs, etc.

React

import React from 'react';

export function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

Sample Program

This example shows a simple React app with routing and separate components for header and pages. It simulates loading user data on the User page.

React

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function Header() {
  return (
    <header>
      <nav>
        <ul>
          <li><Link to='/'>Home</Link></li>
          <li><Link to='/user'>User</Link></li>
        </ul>
      </nav>
    </header>
  );
}

function HomePage() {
  return <main><h1>Home Page</h1><p>Welcome to the home page.</p></main>;
}

function UserPage() {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    // Simulate fetching user data
    setTimeout(() => {
      setUser({ name: 'Alice' });
    }, 500);
  }, []);

  if (!user) return <main><p>Loading user info...</p></main>;

  return <main><h1>User Page</h1><p>Hello, {user.name}!</p></main>;
}

export default function App() {
  return (
    <Router>
      <Header />
      <Routes>
        <Route path='/' element={<HomePage />} />
        <Route path='/user' element={<UserPage />} />
      </Routes>
    </Router>
  );
}

Important Notes

Split your app into small components to keep code clean and reusable.

Use routing libraries like react-router to handle multiple pages or views.

Keep data fetching and side effects inside components or custom hooks.

Summary

Organize large React apps by splitting code into folders and components.

Use routing to manage different pages or views.

Keep logic and UI separated for easier maintenance and teamwork.