Using SOLID in Reactjs.

Yeah, I've written react apps for a while now and I've indeed improved over the years. But little did I know, I have actually been using the 𝐒𝐎𝐋𝐈𝐃 principle in React. Yes, SOLID principle. You read that right. And I got to know this from reading a colleague's code and advising them on some "𝘣𝘦𝘴𝘵 𝘱𝘳𝘢𝘤𝘵𝘪𝘤𝘦𝘴".

S - Single Responsibility Principle (SRP)

"𝐴 𝑐𝑙𝑎𝑠𝑠(𝑐𝑜𝑚𝑝𝑜𝑛𝑒𝑛𝑡) 𝑠ℎ𝑜𝑢𝑙𝑑 ℎ𝑎𝑣𝑒 𝑜𝑛𝑙𝑦 𝑜𝑛𝑒 𝑟𝑒𝑎𝑠𝑜𝑛 𝑡𝑜 𝑐ℎ𝑎𝑛𝑔𝑒".

Each component you create should focus on one responsibility. Mixing UI, state management, and API calls in the same component usually makes it hard to maintain. Use reusable components and custom hooks to minimise this.

O - Open/Closed Principle (OCP)

"𝑆𝑜𝑓𝑡𝑤𝑎𝑟𝑒 𝑒𝑛𝑡𝑖𝑡𝑖𝑒𝑠 𝑠ℎ𝑜𝑢𝑙𝑑 𝑏𝑒 𝑜𝑝𝑒𝑛 𝑓𝑜𝑟 𝑒𝑥𝑡𝑒𝑛𝑠𝑖𝑜𝑛 𝑏𝑢𝑡 𝑐𝑙𝑜𝑠𝑒𝑑 𝑓𝑜𝑟 𝑚𝑜𝑑𝑖𝑓𝑖𝑐𝑎𝑡𝑖𝑜𝑛"

In React, instead of modifying a component's core logic every time requirements change, extend it through props, composition or HOCs/hooks.

Another way you can look at this. Assuming your project uses a button but has different colours used at various portions, you can just use props to extend this by creating variants.

L - Liskov Substitution Principle (LSP)

"𝑆𝑢𝑏𝑡𝑦𝑝𝑒𝑠 𝑚𝑢𝑠𝑡 𝑏𝑒 𝑠𝑢𝑏𝑠𝑡𝑖𝑡𝑢𝑡𝑎𝑏𝑙𝑒 𝑓𝑜𝑟 𝑡ℎ𝑒𝑖𝑟 𝑏𝑎𝑠𝑒 𝑡𝑦𝑝𝑒𝑠"

In React, specialised components should behave like their general counterparts.

For example, if PrimaryButton extends Button, it should work anywhere a Button is expected, without breaking UI or functionality.

I - Interface Segregation Principle (ISP)

"𝐶𝑙𝑖𝑒𝑛𝑡𝑠 𝑠ℎ𝑜𝑢𝑙𝑑 𝑛𝑜𝑡 𝑏𝑒 𝑓𝑜𝑟𝑐𝑒𝑑 𝑡𝑜 𝑑𝑒𝑝𝑒𝑛𝑑 𝑜𝑛 𝑚𝑒𝑡ℎ𝑜𝑑𝑠 𝑡ℎ𝑒𝑦 𝑑𝑜 𝑛𝑜𝑡 𝑢𝑠𝑒".

For this, simply do not create giant components with dozens of props, or even states you don't really need. Split responsibilities into smaller, focused interfaces, components or hooks.

D - Dependency Inversion Principle (DIP)

"𝐷𝑒𝑝𝑒𝑛𝑑 𝑜𝑛 𝑎𝑏𝑠𝑡𝑟𝑎𝑐𝑡𝑖𝑜𝑛𝑠, 𝑛𝑜𝑡 𝑐𝑜𝑛𝑐𝑟𝑒𝑡𝑖𝑜𝑛𝑠"

Components shouldn't directly fetch data or rely on low-level implementations. Instead, use hooks or contexts to provide data.

You will realise UserCard does't know how data is fetched. It depends on an abstraction, useUser, not on the actual API call.

So if you also write React and you try to

* Keep your components clean and focused

* make them reusable and substitutable.

* Design smaller, focused APIs and props.

* or even decouple UI from the implementation details.

If you do any of this, then you are also using the SOLID principle.

𝕋𝕙𝕒𝕟𝕜𝕤 𝕗𝕠𝕣 𝕣𝕖𝕒𝕕𝕚𝕟𝕘 𝕥𝕙𝕚𝕤.

Let me know what different ways you also use the SOLID principle.