React e putin diferit acum daca e sa vorbim de UI, in React exista librarii headless:
Headless UI - Unstyled, fully accessible UI components
Primitives — Radix UI (radix-ui.com)
React Aria (adobe.com)
Home | React Hook Form - Simple React forms validation (react-hook-form.com)
React Table - Hooks for building lightweight, fast and extendable datagrids for React (tanstack.com)
Home | Downshift Docs (downshift-js.com)
Acestea nu implementeaza design-ul/componenta in sine, dar implementeaza logica in hook-uri sau expune handlere prin prop-uri pentru a-ti crea propria componenta. Ele rezolva probleme de compatibilitate (chiar si pe mobile/touch) si adauga accesibilitate, internationalizare, virtualizare componentelor tale.
Am probleme si cu ele (oamenii le folosesc fara sa citeasca documentatia) sau headlessui e prea primitiv (a trebuit sa luam react aria ca sa avem multi select in dropdown-uri), dar sunt mult mai ok decat sa incepi sa implementezi si sa intretii o componenta custom la un proiect mare. (avem si din ele destule si mergem spre librarii headless pe cat posibil)
Implementarea de multe ori e deja best practice, ai face exact acelasi lucru daca l-ai implementa tu doar ca ar trebui sa scrii si sa testezi toata logica, plus la multe lucruri precum ARIA, Safari, touch-ul 90% din oameni nu le implementeaza. Iar la librarii precum React Table iese din discutie sa implementezi ceva de la 0 daca trebuie facut cum trebuie.