- Use PascalCase for React component names and camelCase for variables/functions.
- Prefer named exports over default exports for components.
- Structure components with hooks (useState, useEffect, useCallback) before the JSX return.
- Always provide unique 'key' props when rendering lists.
- Build small, reusable, composable components organized by feature.
- Employ optimistic UI updates to reflect changes instantly before server confirmation, improving perceived performance.
- Implement Error Boundaries to catch and isolate errors in child components without crashing the app.
- Ensure accessibility by using ARIA attributes systematically and managing keyboard focus on interactive elements.
- Destructure props at the component parameter for cleaner code and better readability.
- Use conditional rendering for dynamic content to keep components lean and focused.