Производительность React Hooks?

Question

[KnightForce]

1. Как сказывается функциональная структура и пересоздание функций обработчиков на памяти и производительности в React WEB и React Native?

const SomeButton = () => {
    const [count, setCount] = useState(0);
    return <Button onClick = {() => setCount(count + 1)}/>
}

По сути это приводит к пересозданию функций обработчиков.
А ведь это плохая практика.

2. Насколько они быстрее (и быстрее ли) классовых компонентов?

3. Есть способ закешировать через useCallback обработчики, но я все же спрашиваю именно о таком случае (п. 1), так как встречал, когда писали именно так, с оправданием, что это не сильно садит производительность.

Answer 1

[Антон Спирин]

1. Понятное дело, что создание дополнительных функций занимает дополнительное время. Только разницу в случае с хандлерами вы вряд ли заметите.

2. Тут все зависит от ряда обстоятельств. Если вам нечего делать, то можете попробовать написать бенчмарки для разных кейсов. Для рендера списка из 1000 простых элементов даже не получится зафиксировать точную разницу, так как таймеры работают с небольшой погрешностью, а счет тут идет на тысячные секунды и их доли.

3. Даже если вы будете использовать useCallback функция все равно будет пересоздаваться каждый рендер, более того при использовании useCallback будет еще несколько дополнительных внутренних вызовов. Но пример из пункта 1, если Button является функциональным компонентом то, это как раз тот случай когда useCallback, вроде бы, надо использовать, так как он предотвращает вызов теоретически более дорогой операции - перерисовки Button.