ок, але в ідеалі хотілося б можливість логати діфф при зміні.

Тогда манкипатчить useState

let {target: { name, value }} = e;
let checked = [name, ...this.state.checked];
this.setState({checked});

всем привет, рендер реагирует на изменения с запазданием на 1 действие (клик), как будто checked мутируется

пните пож в нужную сторону, бо голова уже кипит

this.setState((prevState) => ({
   ...prevState,
   checked: ....
}));

checked - масив!!!

и может ли на такое поведение влиять то, что элемент завернут в такую конструкцию (а по сути)

onClick={(e) => {
                                               // prevent checkbox area clicks
                                               if (e.target.querySelector('.checkbox') || e.target.className.indexOf('checkbox') !== -1) {
                                                   e.preventDefault();
                                                   e.stopPropagation();
                                               }
                                           }}

да, а в чем вопрос?

Якийсь дивний флоу

проверил, если хардкодить просто массив чеккед - все как нужно. получается что в сетСтейт передается что-то не то

превстейт не нужно спредить

y?

ну реакту достаточно только тех полей, которые вы обновляете

А, ну если не хуки, то да

в хуках нет setState)

Под капотом ведь все равно спред произойдет

я говорю о примере выше

const [state, setState] = useState()

часто так называешь стейт?)