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

В этом коде есть несколько моментов, связанных с оптимизацией и правильным использованием React хуков:

1. useCallback((el) => () => { log(el); }, []) — здесь создаётся функция, которая возвращает другую функцию с замыканием на el. Но зависимостей нет, значит el будет всегда первый или undefined, что неправильно.

2. В arr.map(el => <button onClick={submit(el)} />) — submit(el) вызывается сразу при рендере, а не при клике. Нужно передавать функцию, а не результат вызова.

3. В arr.map(el => <SomeComp key={} onClick={() => submit(el)} />) — здесь правильно создаётся функция-обёртка, но key пустой, что вызовет предупреждения. Ключ должен быть уникальным.

4. useMemo(() => ({c: a + b}), [a,b]) — создаёт мемоизированный объект, чтобы не создавать новый объект при каждом рендере, если a и b не изменились.

5. Child = React.memo(() => {}) — мемоизация компонента, чтобы он не перерендеривался без необходимости.

Итог:

• submit должен принимать el и возвращать функцию, но зависимости должны быть корректны.
• В onClick нельзя вызывать функцию сразу, нужно передавать функцию-обработчик.
• Ключи должны быть уникальными.
• useMemo и React.memo помогают оптимизировать рендеры.

Пример исправления:

const submit = useCallback((el) => () => { log(el); }, []);

arr.map(el => <button key={el.id} onClick={submit(el)} />)

// или
arr.map(el => <SomeComp key={el.id} onClick={() => submit(el)()} />)

const param = useMemo(() => ({c: a + b}), [a,b]);

return <Child value={param} />;

const Child = React.memo(({value}) => { /* ... */ });