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

Question

[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>
  );
}

Answer 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>
  );
}

Comments

[frontendo]

код не работает, так как функция остается из первого рендера, в котором count был равен 0

[Толстый Лорри]

frontendo,

const onClick = useCallback(() => {
    setCount(count +1);
  }, [count]);

[АйТи Синяк]

frontendo, на глаз писал пропустил аргумент :)
Толстый Лорри, спасибо за дополнение)