To create React components effectively, it's important to understand and apply design patterns. Patterns help with decision-making, making the code more maintainable, reusable, modular, and testable, while also promoting clear separation of responsibilities.
Although some of the articles are outdated, they provide a good starting point for understanding the concepts introduced in the previous paragraph.
-
React Component Composition(HOCs, CloneElement, RenderProps)
- https://medium.com/trabe/advanced-composition-in-react-cloneelement-hocs-and-renderprops-a20971aec50e
- https://medium.com/@mjewell/functional-composition-of-react-components-527f6930a42
- https://legacy.reactjs.org/docs/higher-order-components.html
- https://github.com/krasimir/react-in-patterns/blob/master/book/chapter-04/README.md
- https://www.codementor.io/@caseymorris/react-composing-higher-order-components-hocs-m2i4r17xv
- https://medium.com/javascript-scene/do-react-hooks-replace-higher-order-components-hocs-7ae4a08b7b58
- https://epicreact.dev/one-react-mistake-thats-slowing-you-down/
- https://alexkondov.com/tao-of-react/#group-by-route-module
- https://frontarm.com/james-k-nelson/passing-data-props-children/
- https://oieduardorabelo.medium.com/react-avan%C3%A7ado-utilizando-props-children-como-fun%C3%A7%C3%A3o-de-primeira-classe-f6be8acdfaf1
- https://betterprogramming.pub/passing-data-to-props-children-in-react-5399baea0356
- https://legacy.reactjs.org/docs/render-props.html
- https://javascript.plainenglish.io/5-react-design-patterns-you-should-know-629030e2e2c7
- https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/
- https://dmitripavlutin.com/orthogonal-react-components/
-
Code smells
-
Controlled and Uncontrolled Components
- https://github.com/krasimir/react-in-patterns/blob/master/book/chapter-05/README.md
- https://legacy.reactjs.org/docs/forms.html#controlled-components
- https://legacy.reactjs.org/docs/uncontrolled-components.html
- https://blog.logrocket.com/controlled-vs-uncontrolled-components-in-react/
- https://dmitripavlutin.com/controlled-inputs-using-react-hooks/
-
Presentational and container components
- https://github.com/krasimir/react-in-patterns/blob/master/book/chapter-06/README.md
- https://blog.bitsrc.io/implementing-the-container-pattern-using-react-hooks-f490a8492d05
- https://alexkondov.com/tao-of-react/#container-and-presentational
- https://alexkondov.com/tao-of-react/#stateless-and-stateful
- https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
- https://medium.com/@learnreact/container-components-c0e67432e005
-
Conditional Rendering
- https://betterprogramming.pub/4-ways-to-conditionally-render-in-react-3785fb5e5013
- https://www.digitalocean.com/community/tutorials/7-ways-to-implement-conditional-rendering-in-react-applications
- https://alexkondov.com/tao-of-react/#conditional-rendering
- https://blog.logrocket.com/react-conditional-rendering-9-methods/
-
Compound Components
- https://kentcdodds.com/blog/compound-components-with-react-hooks
- https://epicreact.dev/soul-crushing-components/
- https://www.smashingmagazine.com/2021/08/compound-components-react/
- https://betterprogramming.pub/compound-component-design-pattern-in-react-34b50e32dea0
- https://levelup.gitconnected.com/how-to-use-component-composition-to-create-a-flexible-compound-component-in-react-4024660b9613
-
Recursive Components
- https://blog.logrocket.com/recursive-components-react-real-world-example/
- https://antongunnarsson.com/recursive-components/
- https://dev.to/knowit-development/recursive-components-in-react-37ka
- https://naveenda.medium.com/how-to-recursively-render-the-react-component-a821b3532894
- https://betterprogramming.pub/recursive-rendering-with-react-components-10fa07c45456
-
Error Boundaries
-
Custom Hooks