I'm writing a simple custom component (fancy toggle switch, fwiw) and I'm curious what opinions are about using both an onChange prop and an onClick prop. I'm currently using both to facilitate a separate confirmation modal that attaches to the onClick property.

Example:

     if (onClick !== undefined) onClick({ checked: !isChecked })
     if (onChange !== undefined) {
       onChange(!isChecked)
       setUncontrolledChecked(!isChecked)
     } else setUncontrolledChecked(!isChecked)

In this case, onClick works to circumvent the change in the toggle and allow the component to act as fully controlled, while the onChange hooks in to allow for side effects where the component is being used in an uncontrolled way elsewhere in the application.

Probably this topic is covered in some official designation of component properties somewhere, but I haven't been able to find it, so I'm interested to hear what SO thinks.