Member-only story
How to Apply Interface Segregation Principle in ReactJS
SOLID principles in action
SOLID is a set of principles that are not specific to any framework or language. These principles help us to understand how to write beautiful applications for our customers.
Today we will talk about the fourth principle of SOLID:
I: Interface Segregation Principle
We will try to understand the underlying concept of this principle and implement it in the context of ReactJS.
Previous Articles in this Series
- Single Responsibility Principle
- Open Closed Principle
- Liskov Substitution Principle
- Dependency Inversion Principle
What’s This Principle All About?
According to Stackify, the Interface Segregation Principle says
Clients should not be forced to depend upon interfaces that they do not use
In ReactJS we don’t use any interface, at least not in the sense of object-oriented programming. So the main takeaway for this scenario is:
Components should not depend on things they don’t need.
Now, let’s see how this principle can help us to write clean and beautiful ReactJS components.
A Practical Approach
Let’s say we have a User component that’s responsible for displaying the details of a user. Our user object looks something like this:
However, it uses two children components, named PersonalDetails and BankingDetails to show the details.
Our User component looks something like this:
