const submit = (el) => () => { log(el); } arr.map(el => <button onClick={submit(el)}/>) arr.map(el => <SomeComp key={} pmclick={() => submit(el)} />) const param = useMemo(() => ([c: a + b]), [a,b]) return <Child value={param} /> Child = React.memo(() => {})

В этом коде показаны разные подходы к обработке событий и оптимизации в React.

1. Функция submit возвращает замыкание, которое логирует переданный элемент. Это позволяет создавать обработчики с параметрами:

const submit = (el) => () => { console.log(el); }
arr.map(el => <button onClick={submit(el)} />)

2. В компоненте <SomeComp /> обработчик передается через пропс pmclick как анонимная функция, вызывающая submit(el). Это создаёт новую функцию при каждом рендере, что может повлиять на производительность.

3. useMemo используется для мемоизации значения param, зависящего от a и b. Это предотвращает ненужные пересчёты и перерендеры дочерних компонентов:

const param = useMemo(() => [c = a + b], [a, b]);
return <Child value={param} />;

4. Child обёрнут в React.memo(), что предотвращает его перерендер, если пропсы не изменились. Важно, чтобы param был мемоизирован, иначе Child будет перерендериваться каждый раз.

Итого, чтобы оптимизировать рендеринг и обработку событий:

• Используйте мемоизацию для сложных вычислений и объектов, передаваемых в пропсы.
• Избегайте создания новых функций в пропсах без необходимости.
• Используйте React.memo для компонентов, которые не должны перерендериваться без изменения пропсов.