# Composition and Inheritance

## 1. Composition and Inheritance

![](https://2152464872-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjE1Y7UScIVoSOhLGSH%2Fuploads%2FJq4HbuFULFihTRUdSlbq%2Fimage.png?alt=media\&token=9e204a04-9bcc-47af-937a-f51b46db73f3)

Inheritance --> tính kề thừa của OOP&#x20;

Composition --> không phải tính chất

Đều xuất phát từ bài toán reuse code ?

![](https://2152464872-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjE1Y7UScIVoSOhLGSH%2Fuploads%2FH47fA5wxSCUjz7S9ltVk%2Fimage.png?alt=media\&token=bf775723-fd75-40fb-9117-e217ef1dabf6)







## 2. Hooks

![](https://2152464872-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjE1Y7UScIVoSOhLGSH%2Fuploads%2FMoa3wphk2dn6uRtWtA6i%2Fimage.png?alt=media\&token=3b1e838c-b5ab-449b-8e44-1bfe91c2163a)

[https://www.velotio.com/engineering-blog/cleaner-efficient-code-with-hooks-and-functional-programming#:\~:text=Wrapper%20Hell%20%2D,-If%20you're\&text=React%20solves%20this%20problem%20of,a%20problem%20called%20Wrapper%20Hell.](https://www.velotio.com/engineering-blog/cleaner-efficient-code-with-hooks-and-functional-programming)

* Hard to reuse stateful logic between components.\


![](https://2152464872-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjE1Y7UScIVoSOhLGSH%2Fuploads%2F1yjDgcRbL3biyK6VZ0r5%2Fimage.png?alt=media\&token=4c14d2e6-cf81-4f41-b31b-9cc96922fa5d)

Làm sao để reuse được flow tick --> Render props and HOC

* Complex components become hard to understand
* Classes confuses both people and machine : con trỏ this























