This is a repository I created to play with different React APIs and patterns.
- Instead of creating new components called
DogListWithSearch
andCatListWithSearch
, I created an HOC calledwithSearch
that wraps around a component that needs a search feature added (which areDogList
andCatList
in this case). - This helped me remove duplucate codes.
App
src/hocExamples/withSearch
- HOCsrc/hocExamples/DogList
src/hocExamples/AnimalCard
src/hocExamples/withSearch
- HOCsrc/hocExamples/CatList
src/hocExamples/AnimalCard
- You can find the files under
src/hooksExamples
.
- I prevented props-drilling via
context
and prevented unnecessary rerender through the usage ofReact.memo
. - But bear in mind,
context
is not a state managing tool!
https://flexiple.com/react/introduction-to-higher-order-components-in-react-by-example/