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(() => {})

This code shows different approaches to event handling and optimization in React.

1. The submit function returns a closure that logs the passed element. This allows creating handlers with parameters:

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

2. In the <SomeComp /> component, the handler is passed via the pmclick prop as an anonymous function that calls submit(el). This creates a new function on each render, which can affect performance.

3. useMemo is used to memoize the value param, which depends on a and b. This prevents unnecessary recalculations and re-renders of child components:

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

4. Child is wrapped in React.memo(), which prevents it from re-rendering if props haven't changed. It's important that param is memoized; otherwise, Child will re-render every time.

In summary, to optimize rendering and event handling:

• Use memoization for complex calculations and objects passed as props.
• Avoid creating new functions in props unless necessary.
• Use React.memo for components that shouldn't re-render without prop changes.