React Native Design Patterns

Estimated read time 2 min read

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

Pros:

  • 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

Cons :

  • 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.

Loading...