component-reuse-checklist

To prevent duplicate UI components in React, use a pre-flight validation checklist to verify existing primitives and composites before drafting new ones. This mandatory process reduces code duplication and promotes maintainability across your project.

Component reuse is the practice of utilizing existing UI primitives and composites instead of creating new ones. It is important for frontend development because it improves efficiency, ensures visual consistency, and reduces code redundancy in React projects.

You check for existing UI components by running through a mandatory pre-flight checklist that guides you to search for available primitives and composites. This ensures you reuse existing elements whenever possible before starting development.

The checklist is specifically designed to facilitate UI component reuse standards in React projects. While the general principle of checking for existing primitives applies broadly, the guidance and best practices target React development workflows.

You should avoid reusing an existing UI component if the pre-flight checklist reveals no matching primitives or composites that satisfy your feature requirements. In such cases, creating a new component is necessary to avoid overloading existing elements with unrelated logic.