Keep components, functions, styles, state, etc. as close as possible to the component where it's being used. This will not only make your codebase more readable and easier to understand but it will also improve your application performance since it will reduce redundant re-renders on state updates.
Do not add multiple rendering functions inside your application, this gets out of control pretty quickly. What you should do instead is if there is a piece of UI that can be considered as a unit, is to extract it in a separate component.
// this is very difficult to maintain as soon as the component starts growing
function Component() {
function renderItems() {
return <ul>...</ul>;
}
return <div>{renderItems()}</div>;
}
// extract it in a separate component
function Items() {
return <ul>...</ul>;
}
function Component() {
return (
<div>
<Items />
</div>
);
}Keep your code style consistent. e.g If you name your components by using pascal case, do it everywhere. More on this can be found here
If your component is accepting too many props you might consider splitting it into multiple components or use the composition technique via children or slots.
For larger projects, it is a good idea to build abstractions around all the shared components. It makes the application more consistent and easier to maintain. Identify repetitions before creating the components to avoid wrong abstractions.
Component Library Example Code
It is a good idea to wrap 3rd party components as well in order to adapt them to the application's needs. It might be easier to make the underlying changes in the future without affecting the application's functionality.
3rd Party Component Example Code
Every project requires some UI components such as modals, tabs, sidebars, menus, etc. Instead of building those from scratch, you might want to use some of the existing, battle-tested component libraries.
These component libraries come with their components fully styled.
-
Chakra UI - great library with probably the best developer experience, allows very fast prototyping with decent design defaults. Plenty of components that are very customizable and flexible with accessibility already configured out of the box.
-
AntD - another great component library that has a lot of different components. Best suitable for creating admin dashboards. However, it might be a bit difficult to change the styles in order to adapt them to a custom design.
-
MUI - the most popular component library for React. Has a lot of different components. Can be used as a styled solution by implementing Material Design or as unstyled headless component library.
These component libraries come with their components unstyled. If you have a specific design system to implement, it might be easier and better solution to go with headless components that come unstyled than to adapt a styled components library such as Material UI to your needs. Some good options are:
There are multiple ways to style a react application. Some good options are:
Some good combinations of component library + styling
- Chakra UI + emotion - The best choice for most applications
- Headless UI + tailwind
- Radix UI + stitches
Storybook is a great tool for developing and testing components in isolation. Think of it as a catalogue of all the components your application is using. Very useful for developing and discoverability of components.