Design Patterns are the skeleton of software development. It will provide a solution to most of the common problems in software design. It is a concept which will be used to handle the problems in software development. In this article, I have listed some of the design patterns which we are using in React and React native.
- Container component Patterns
- Higher-Order Component Patterns
- Render Props Patterns
- Compound Component Patterns
- Context API
- Utilizing Hooks
Container component Patterns
There won’t be much difference between the Presentation and Container components. The presentation component speaks about how data rendered in the UI and container component care about what data is shown to the User.
The container component will pass the data to the presentation component, it is responsible for the state and data of the application.
Presentation components are called stateless pure functions and Container components are called stateful pure functions.
Higher-Order Component Patterns
This pattern is most used when we are in need of reusing the block of code across the entire application. It is a component that will return a component with some additional logic in it . The best use case for this is to reuse the button component across the application with some styling changes
- It will allow us to keep the logic in one place and reuse it across the application
- Allow us to avoid the duplication of the code
- Sometimes due to the Props, it may cause the naming collisions.
To avoid the naming collisions, need to be more conscious when we name the props or the props need to be merged.
Note: The rest of the Patterns will be covered in the next article.