Как предотвратить ненужный повторный рендеринг при передаче обратных вызовов запоминаемым дочерним компонентам? ⇐ Javascript

[Anonymous]

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

Код: Выделить всё

React.memo). Несмотря на то, что реквизиты, используемые внутри дочернего элемента, не меняются, дочерний элемент по-прежнему выполняет повторную визуализацию при обновлении родительского состояния.
Вот упрощенная версия кода:
import React, { useState, useCallback } from "react";

const Child = React.memo(({ onClick }) => {
console.log("Child rendered");
return Click;
});

export default function Parent() {
const [count, setCount] = useState(0);

const handleClick = () => {
console.log("Button clicked");
};

return (

Count: {count}
 setCount(count + 1)}>Increment


);
}

Несмотря на то, что Child обернут React.memo, он по-прежнему выполняет повторную визуализацию при каждом изменении счетчика.
Я понимаю, что функции создаются заново при каждом рендеринге, что может привести к изменению ссылки на опору.
Мои вопросы:
Является ли обертывание handleClick с помощью useCallback правильным и рекомендуемым подходом?
Есть ли какие-либо вопросы? Недостатки чрезмерного использования useCallback для этой цели?
Как в реальных приложениях вы решаете, когда запоминание действительно того стоит, а не преждевременная оптимизация?
Я ищу лучшие практики, а не просто заставляю этот пример работать.

Подробнее здесь: https://stackoverflow.com/questions/798 ... ed-child-c