Yes, right!!

In React and React Native for example, you can reuse code by applying some kind of good practices. And if the code is well written enough, you can even be able to share code between the web and the mobile (React / React Native).

Here are some thing that I like to work with to allow to code reusability inside my app. Some of these can be reused in other frameworks such as the component part.

At a component level

I like to work with components of multiple types:

• UI components which are business agnostic and that doesn't own any business logic. Let's imagine something like a design system. I create these component to keep cohesion between the different pages I'm building. This ensure reusability (take a look at zeit.co/design/avatar). The most difficult thing right here is to semantically name the components. You can't have something named BillingButton here. But more a Button.

• Layout components which also are business agnostic and that aim to give shapes for your pages. Is there a header? Is there a footer? Are they owning multiple action handlers (button? searchbar?). I also try to make them as open as I can to ensure that I can use them anywhere in my app without that much headaches.

• Business components (you named them :D) which actually own information concerning the logic of the app and that are connected to a single source truth concerning state management (let's say redux / mobx). They can have a name of a feature for example and are really business specific.

Cross cutting concerns

When you work in real world applications, you always have to rely on something called "cross cutting concerns". If you're familiar with backend programmation, it can be achieved by relying on the "AOP" paradigm. The idea seems quite complicated but it's absolutely not :D

Cross cutting concerns are transverse to the application, like tracking, analytics or error handling. You can tackle them from different angle and with different strategy depending the tools you're using. But if you stay with React / React Native, there are actually three ways to tackle them:

• Higher Order Component (it's the same as Higher Order Function but for components :p) which are a way to enhance a component by adding some behavior AROUND this

• Render Props which tackle the same problems but with a more "explicit way" for you peer collaborators

• Hooks which also tackle the same problem using a way simpler approach (probably more future oriented) but it requires some late version of React.

All of these 3 techniques allows to factor and reuse code in multiple places in your app by isolating the concerns.