Single Responsibility Principle

Suppose you have a function or a class, or any single identity of your code, that should have a single responsibility.

Let's understand by using below example:

import React from 'react';
import { useRouteError } from 'react-router-dom';

const Error = () => {
    const err = useRouteError();
    console.log(err)
    return (
        <div>
            <h1>Oops!!!</h1>
            <h2>Something went wrong!!</h2>
            <h3>{err.status}: {err.statusText}</h3>
        </div>
    )
};

export default Error;

In the above example we have a functional component "Error" which is end of the day a normal JavaScript function. Each component is a different function. So, according to Single Responsibility Principle, each component should have single responsibility which means the only job of the above "Error" component is to display error and nothing else.

Suppose we have a "Header" component in our App, so the job of the "Header" component is to display only the "Header" of the App and nothing else. So every different component in a App should be given a single responsibility. No component should do a lot of things other than what is recommended. If in case you are doing a lot of things inside a single component, you should break that down into multiple components to maintain the Single Responsibility Principle. So your code should be modular, which means your code should be broken down into smaller smaller modules which makes your code more maintainable, reusable and more testable.