SOLID principles in Reactjs
Oleksii Bortnytskyi
Creative Frontend Engineer (React.js & Next.js) | Full-Stack with Node.js | Trainee Blockchain Dev (Solidity) | TypeScript | Performance-Driven | Building Scalable Web Apps
SOLID principles...
are five?principles that make software design maintainable, scalable, and easy to modify. SOLID principles can be applied in ReactJS, just like in any object-oriented programming language. Here are a few examples of how SOLID principles can be applied in ReactJS:
01 - Single Responsibility Principle
Single Responsibility Principle - each React component should only be responsible for one task and should not perform functionality that is not related to its responsibility.
Example: Consider a component called “UserProfile” which is responsible for displaying the user’s profile information as well as fetching the data from the API. This violates the SRP as the component has two responsibilities, data retrieval, and display. To adhere to the SRP, we can split this component into two separate components, “UserProfileDisplay” and “UserProfileFetcher”.
02 - Open/Closed Principle
The Open/Closed Principle (OCP) means that you should be able to add new features to a component without changing the original code. In ReactJS, this is done by designing components so that they can be extended
Example: Consider a component called “Form” that can be used to display different types of forms, such as a login form or contact form. To adhere to the OCP, we can create a base “Form” component and extend it for each specific form type, such as “LoginForm” and “ContactForm”. This way, the base “Form” component remains closed for modification but open for extension.
03 - Liskov Substitution Principle
The Liskov Substitution Principle means that you should be able to replace a parent component with a child component that behaves in the same way. In ReactJS, this means designing components so that they can be swapped with other components that have similar functionality. This makes the code more flexible and easier to scale.
Example: Consider a component called “Button” and a subclass called “SubmitButton”. Both of these components should have the same methods and properties so that they can be used interchangeably. This way, if we have a component that uses the “Button” component, we can substitute it with the “SubmitButton” component without affecting the functionality.
领英推荐
04 - Interface Segregation Principle
The Interface Segregation Principle means that a component should only have the methods and properties that it needs, and should not be forced to implement unnecessary ones. In ReactJS, this means designing components so that they only implement the features they require. This helps keep the code efficient and reduces the risk of errors.
Example: Consider a component called “Notification” that has methods for sending emails, SMS, and push notifications. However, not all implementations of this component need to send all three types of notifications. To adhere to the ISP, we can split the “Notification” component into three separate interfaces, “EmailNotification”, “SMSNotification”, and “PushNotification”. This way, a component that only needs to send emails can implement the “EmailNotification” interface without being forced to implement the other methods.
05 - Dependency Inversion Principle
The Dependency Inversion Principle means that components should depend on abstract interfaces instead of depending on each other directly. In ReactJS, this means designing components so that they are not closely tied to each other but instead are connected through abstract interfaces. This makes the code more flexible and easier to change.
Example: The UserList component depends on an abstract interface (dataSource), not on a concrete implementation of the low-level modules (API and Database). This allows the UserList component to be reused with different implementations of the data source without affecting its functionality.
Conclusion
In conclusion, following the SOLID principles in ReactJS can lead to better maintainable, scalable, and easy-to-modify code. By adhering to these principles, you can ensure that your code is well-structured, making it easier for other developers to understand and work with.
Thanks for reading this article!
Front-end Developer
2 年Hello Oleksii, this article is great. You've managed to explain SOLID correctly and even to apply them React. I'd like to add important remark. These principles where initially designed for OOP using classes for languages where creating a class is kinda creating custom type. So in React development we definitely can benefit from using them, but it not strictly required or recommended to do for all our code. Let me explain on example of Liskov Substitution: Classes inheritance is relationship "A is a kind of B". That is why for classes we must always follow this principle. If we need to volatile this principle, we should use composition according to Barbara Liskov recommendations. Composition is relationship "B is a part of A" Using React we never use inheritance. It is always composition. Using composition we can get all benefits of code reusing but we don't need to follow Barbara Liskov for all cases. Only in cases when we need to emulate "A is a kind of B" behaviour with composition. It is possible and easy to do, but we need in rare cases. So, we need to follow Barbara Liskov principle only when parent - child relationship is "A is a kind of B". Something similar we can say for other SOLID principles.