Какой лучший способ передать данные обработчику событий: закрытием функции или настраиваемым атрибутом данных

Question

У меня вопрос о передаче данных обработчикам событий. Разве не лучше прикрепить настраиваемый атрибут данных к компоненту и получить его из полученного объекта события в обработчике, вместо того, чтобы создавать новые функции при каждом рендеринге для закрытия данных. Какие недостатки у этого метода? Потому что я не смог найти никакой информации в официальных документах.

const Ids = [0, 1];

const Comp = (props) => {
    const onClick = useCallback((e) => {
        console.log(e.target.dataset.index);
    }, []);

    return (
        Ids.map(id => (
            <div data-id={id} onClick={onClick} />
        ))
    );
};

Answer 1

В то время как использование атрибутов data- является общепринятым в ванильной разработке JavaScript / HTML, в React можно было бы передать необходимые данные как часть параметров вашего метода обработчика событий.

Это фактически указано в документации

Нет. Мы не рекомендуем хранить данные в атрибутах DOM. Даже если вам нужно, атрибуты data-, вероятно, лучший подход, но в большинстве случаев данные должны храниться в состоянии компонента React или во внешних хранилищах.

Следовательно, while response не ограничивает вас явным образом при этом рекомендуется избегать использования атрибутов data- без необходимости.

Основываясь на вашем примере, вот как это должно быть сделано:

return (
    Ids.map(id => (
        <div data-id={id} onClick={() => onClick(id)} />
    ))
);