security-hooks/.crosslink/rules/javascript-react.md

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

// 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