Building apps that can grow without falling apart? That’s where SOLID best practices come in. They keep your React projects sturdy and ready to scale.

React apps can get complicated as they grow, but SOLID principles help keep things under control. These best practices act like the foundation of a house, making sure your app stays strong as it expands. By sticking to SOLID, you’ll build components that are easy to work with, flexible, and ready to scale.

TL;DR;

SOLID principles make React apps easier to manage and scale. They help you write cleaner code that’s easier to work with. Here’s a quick rundown:

• Single Responsibility Principle (SRP): Keep components focused on one task.
• Open/Closed Principle (OCP): Build components to extend, not change.
• Liskov Substitution Principle (LSP): Subclasses should replace base classes without breaking things.
• Interface Segregation Principle (ISP): Only pass the props you need.
• Dependency Inversion Principle (DIP): Use hooks and context to keep components loosely connected.

FAQ

Single Responsibility Principle (SRP)

The Single Responsibility Principle (SRP) means each React component should do one thing well. Keeping components small and focused makes them easier to manage, reuse, and test. Think of SRP like organizing a toolbox—each tool has its own job, making it simple to find what you need.

Break large components into smaller parts:

const UserProfile = ({ user }) => (
  <div>
    <UserAvatar avatar={user.avatar} />
    <UserInfo name={user.name} bio={user.bio} />
  </div>
);

const UserAvatar = ({ avatar }) => <img src={avatar} alt="User Avatar" />;
const UserInfo = ({ name, bio }) => (
  <div>
    <h2>{name}</h2>
    <p>{bio}</p>
  </div>
);

Each component has a clear job, making your code cleaner and reusable. Learn more about SRP and how to use it in Giovanna Moeller‘s, The Single Responsibility Principle (SRP) of SOLID.

Open/Closed Principle (OCP)

The Open/Closed Principle (OCP) means your React components should be open for extension but closed for modification. This means you can add new features without changing existing code. Think of OCP like adding an attachment to a tool—you can extend its use without altering the tool itself.

Create components that can be extended:

const Button = ({ label }) => <button>{label}</button>;

const IconButton = ({ icon, label }) => (
  <Button label={label}>
    <span>{icon}</span>
  </Button>
);

Here, IconButton adds new functionality without changing Button. Learn more about OCP and how to use it in Reza Erami‘s, Open-Closed Principle: Extending Your Code Without Modification.

Liskov Substitution Principle (LSP)

The Liskov Substitution Principle (LSP) means you can replace components without breaking your app. In React, subclasses should work just like the components they replace. It’s like swapping out a part in a machine—the new part should fit without needing to change anything else.

Keep components replaceable:

const Button = ({ label }) => <button>{label}</button>;

const PrimaryButton = (props) => <Button {...props} className="primary" />;

PrimaryButton adds style but works like Button, keeping things simple and interchangeable. Learn more about LSP and how to use it in Tushar Ghosh‘s, Liskov Substitution Principle (LSP).

Interface Segregation Principle (ISP)

The Interface Segregation Principle (ISP) says to keep your React components simple by only passing the props they need. This makes your components easier to use and avoids unnecessary complexity. Think of ISP like packing light for a trip—only bring what you really need.

const TextInput = ({ label, value, onChange }) => (
  <div>
    <label>{label}</label>
    <input type="text" value={value} onChange={onChange} />
  </div>
);

Here, TextInput only gets the props it needs, keeping things clean and focused. Learn more about ISP and how to use it in Ramdhas‘s, Interface Segregation Principle (ISP): SOLID Principle.

Dependency Inversion Principle (DIP)

The Dependency Inversion Principle (DIP) suggests keeping components loosely connected by relying on abstractions, not concrete implementations. In React, this often means using hooks and context to manage dependencies. Think of DIP as using universal adapters for your devices—you’re not tied to one specific power source.

Decouple your components using context:

const AuthContext = React.createContext();

const useAuth = () => useContext(AuthContext);

By using useAuth, your components depend on the context, not a specific implementation, keeping your code flexible. Learn more about ISP and how to use it in Matthias Schenk‘s, SOLID — Dependency Inversion Principle.

Applying SOLID to a Scalable React App

Let’s break down a practical example of using SOLID principles in a React app that manages users, orders, and notifications.

• Single Responsibility Principle (SRP): Separate components for handling user profiles, order processing, and notifications. Each component focuses on one task.
• Open/Closed Principle (OCP): Add new features, like a rewards system, by extending existing components without altering their core logic.
• Liskov Substitution Principle (LSP): Swap out a standard notification component with a custom one without breaking the app.
• Interface Segregation Principle (ISP): Keep interfaces small and focused—pass only necessary props to each component.
• Dependency Inversion Principle (DIP): Use context for shared state, like authentication, so components don’t depend on concrete implementations.

By applying SOLID, you keep your code flexible and scalable as your app grows.

Simple React App Demonstrating SOLID

Let’s build a simple React app to show how these principles work together. The app will manage user profiles and authentication. It will also keep the code clean and easy to scale.

• SRP: Components will each handle a single responsibility.
• OCP: We will extend components without modifying them.
• LSP: Subclasses will be replaceable with their base components.
• ISP: Components will only receive the props they need.
• DIP: We will use context for shared data, keeping components loosely connected.

import React, { createContext, useContext, useState } from 'react';

// Dependency Inversion Principle (DIP) - Auth Context
const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = (username) => {
    setUser({ name: username });
  };

  const logout = () => {
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

const useAuth = () => useContext(AuthContext);

// Single Responsibility Principle (SRP) - User Profile
const UserProfile = () => {
  const { user } = useAuth();
  
  return (
    <div>
      <h2>User Profile</h2>
      {user ? (
        <div>
          <p>Name: {user.name}</p>
        </div>
      ) : (
        <p>No user logged in.</p>
      )}
    </div>
  );
};

// Open/Closed Principle (OCP) - Button Component
const Button = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);

// Extended Button without modifying the original - OCP
const PrimaryButton = ({ children, onClick }) => (
  <Button onClick={onClick} className="primary">
    {children}
  </Button>
);

// Liskov Substitution Principle (LSP) - Swappable Components
const LogoutButton = (props) => <PrimaryButton {...props}>Logout</PrimaryButton>;

// Interface Segregation Principle (ISP) - Minimal Props
const LoginForm = ({ onLogin }) => {
  const [username, setUsername] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    onLogin(username);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Enter your name"
      />
      <PrimaryButton type="submit">Login</PrimaryButton>
    </form>
  );
};

// Main App Component
const App = () => {
  const { user, login, logout } = useAuth();

  return (
    <div>
      <h1>Welcome to SOLID React App</h1>
      {user ? (
        <>
          <UserProfile />
          <LogoutButton onClick={logout} />
        </>
      ) : (
        <LoginForm onLogin={login} />
      )}
    </div>
  );
};

// App Wrapper with AuthProvider
export default function Main() {
  return (
    <AuthProvider>
      <App />
    </AuthProvider>
  );
}

Single Responsibility Principle (SRP):

The UserProfile component only handles displaying user information. Other tasks, like authentication, are handled by separate components.

Open/Closed Principle (OCP):

The Button component can be extended into a PrimaryButton without modifying the original component.

Liskov Substitution Principle (LSP):

The PrimaryButton component can replace Button in the app without causing issues, as it maintains the same functionality with additional styling.

Interface Segregation Principle (ISP):

The LoginForm component only receives the onLogin function, focusing on the minimal props needed to perform its job.

Dependency Inversion Principle (DIP):

The app uses context (AuthContext) to manage authentication, keeping the components loosely connected and flexible.

This simple React app shows how you can apply SOLID principles to create a clean, scalable codebase. By following these best practices, you make your code more organized and easier to maintain, even as your app grows in complexity.

Conclusion

SOLID principles in React help you build apps that are easier to scale and maintain. By applying these best practices, you keep your code clean and organized. Start small—focus on one principle at a time. Over time, your React projects will become more reliable and efficient.

Remember, a strong foundation keeps everything else stable.