React Ui Builder Configuration

---
trigger: always_on
description: Should be active when working with React (creating and editing React components, hooks, etc.)
---

When working with React components, hooks, etc, stick to the following rules:

- Components should be as small as possible, ideally following the `Single Responsibility Principle`
- "side effects" should be extracted into separate hooks whenever possible. Hooks should be small and saved in the `<hookName>.ts` files. One hook per file, with an exception for tiny purpose-related hooks, which can be grouped.
- Whenever possible, sub-components should be extracted from bigger components. E.g., a page view should be built from many smaller components, for example:

DashboardPage.tsx

```tsx
export function DashboardPage() {
  return (
    <SidebarLayout>
      <Sidebar>
        <SidebarNavigation />
      </Sidebar>

      <PageContent>
        <HorizontalNavigation
          items={
            [
              /*  nav items data */
            ]
          }
        />

        <DataTable rows={[]} />
      </PageContent>
    </SidebarLayout>
  );
}
```

- Single `<ComponentName>.tsx` file for a single React component.
- Before creating a new `.ts` or `.tsx` file, always check if a version with the other extension type already exists. E.g., check for the `./styled.tsx` before creating `./styled.ts`, etc.
- Avoid code duplication; when there is a need for a component that potentially has a global use case, always make sure that there is no existing component with the desired functionality before creating a new one.
- Include the rules specified in the `solid-react/*.md` files