@frontendo

Как с производительностью у компонентов с реакт-хуками?

Интересует вопрос с созданием стрелочных функций на каждом рендере, вроде как это являлось плохой практикой

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
  • Вопрос задан
  • 122 просмотра
Пригласить эксперта
Ответы на вопрос 1
С производительностью в функциях с хуками лучше чем в классах, т.к. react fiber (это инструмент для рендера виртуального дерева) гораздо лучше оптимизирует функции чем инстансы классов.

По поводу конкретно твоего кода, ты каждый раз на любой рендер заново создаешь функцию внутри onClick, хотя тебе это не имеет смысла. Поэтому ее нужно мемоизировать с помощью useCallback. Код выглядит следующим образом
function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);
  const onClick = useCallback(() => {
    setCount(count +1);
  }, []);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={onClick}>
        Click me
      </button>
    </div>
  );
}
Ответ написан
Ваш ответ на вопрос

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

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