45 lines
1.2 KiB
Markdown
45 lines
1.2 KiB
Markdown
### JavaScript/React Best Practices
|
|
|
|
#### Component Structure
|
|
- Use functional components with hooks
|
|
- Keep components small and focused (< 200 lines)
|
|
- Extract custom hooks for reusable logic
|
|
- Use PropTypes for runtime type checking
|
|
|
|
```javascript
|
|
// GOOD: Clear component with PropTypes
|
|
import PropTypes from 'prop-types';
|
|
|
|
const UserCard = ({ user, onSelect }) => {
|
|
return (
|
|
<div onClick={() => onSelect(user.id)}>
|
|
{user.name}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
UserCard.propTypes = {
|
|
user: PropTypes.shape({
|
|
id: PropTypes.string.isRequired,
|
|
name: PropTypes.string.isRequired,
|
|
}).isRequired,
|
|
onSelect: PropTypes.func.isRequired,
|
|
};
|
|
```
|
|
|
|
#### State Management
|
|
- Use `useState` for local state
|
|
- Use `useReducer` for complex state logic
|
|
- Lift state up only when needed
|
|
- Consider context for deeply nested prop drilling
|
|
|
|
#### Performance
|
|
- Use `React.memo` for expensive pure components
|
|
- Use `useMemo` and `useCallback` appropriately
|
|
- Avoid inline object/function creation in render
|
|
|
|
#### Security
|
|
- Never use `dangerouslySetInnerHTML` with user input
|
|
- Sanitize URLs before using in `href` or `src`
|
|
- Validate props at component boundaries
|