tsepen
@tsepen
Фронтенд разработчик React & Redux

Лучшее решение повесить обработчик на событие?

В официальной документации React способ повесить функцию на клик выглядит так
import React, { useState } from 'react';

function Example() {
  // Объявляем новую переменную состояния "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Нажми на меня
      </button>
    </div>
  );
}


Но использование стрелочных функций в рендере не рекомендуется, т.к. при каждом рендере будет создана новая функция. Правильно ли будет использовать такой способ или кто как решает эту ситуацию

import React, { useState } from 'react';

function Example() {
  // Объявляем новую переменную состояния "count"
  const [count, setCount] = useState(0);

  const plus = num => () => setCount(count + num)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={plus(1)}>
        Нажми на меня
      </button>
    </div>
  );
}
  • Вопрос задан
  • 102 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Все, что находится в теле функции Example будет выполняться каждый render. Отличие второго способа лишь в том, что он содержит дополнительные операции. Причем, создание хандлера через билдер, в данном случае, абсолютно бессмысленная операция. Подобные приемы уместны если этот билдер где-то переиспользуется и определен за пределами компонента.
Если хандлер передается в другой React компонент, то имеет смысл использовать хук useCallback. В вашем случае в этом нет смысла, так как хандлер передается в нативный элемент.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Robur
@Robur
Знаю больше чем это необходимо
Кем "не рекомендуется"?
Чтобы решать проблему нужно убедиться что есть проблема и четко сформулировать ее.
Если вы решаете проблему что код не подходит под какие-то рекомендации, то это одно, а если вы решаете проблемы с памятью во время выполнения приложения это совсем другое.
Во втором случае у вас на руках должны быть данные полученные в результате анализа того как ваше приложение работает.
Подавляющее большинство render функций вызывается на самом деле достаточно редко чтобы это имело значение.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы