Components

Local component

If a component is going to be used:

• only in one module then it makes sense to keep it in the someModule/components/SomeComponent/index.tsx.
• throughout the app, but it's possible to connect a component with the module then it makes sense to keep it in the someModule/components/SomeComponent/index.tsx.
• only in one component then it makes sense to keep it in the someModule/components/SomeComponent/AnotherComponent.tsx file.

Global components

If you understand that a component will be used throughout the app and you can't connect it with some module then it makes sense to keep this component in the ui module. The most striking example is styled Text.

Best practices

• Try to decompose components as much as possible. It'll be more time-consuming but as a result, your code will be readable, extendable, and maintainable.
• Try to pass as few props as possible. Some of them might be obtained through the useRoute hook.
• Thanks to hooks, it's possible to retrieve the data or use the navigation in any component. Try to keep this in mind. Business logic might be also decomposed. If you notice that a component contains a lot of business logic then it's a good sign to decompose it.
• Try to use as few styles as possible. It does make sense to implement some containers with predefined styles and then use them throughout the app.

New component

If a component doesn't receive any props:

const SomeComponent: React.FC = () => {
    return ...;
}

If a component receives some props:

export type SomeComponentProps = {
    ...
}
const SomeComponent: React.FC<SomeComponentProps> = props => {
   return ...;
}

🤔 3rd party libraries

Ready-to-use UI libraries are a matter of dispute. On one hand, they might reduce the resources for development and provide us with the tested UI components. But on the other hand, sometimes it's easier to develop components from scratch without any 3rd party solutions than customize them.

It makes sense to use them if:

• The design of the application follows some design directions. For example, the material design.
• Your application doesn't contain any ready design and you need to develop it, based on the mockups.
• You would like to use core components from a 3rd party library and develop the application design base on them.