Нужно ли использовать useMemo в hooks?

Question

[miliko mikoyan]

я создал useBanner hooks

const useBanner = (array, yardage) => {
  const [bannArr, setBannArr] = useState(array.slice(0, yardage));
  const [bannListIndex, setBannIndex] = useState(1);

  return {
   ....
  };
};

Правильно ли я делаю что значение и props кидаю в useState ?
допустимо я использовать useBanner.

const Banner= ({
  array,
  yardage
}) => {
  const { bannForth, bannBeck, bannArr } = useBanner(array, yardage);
  return (
    ...
  );
};

когда здесь будут меняться props .
Будет ли меняться состояние в useBanner.
или это считается антипаттерны я должен написать всё это в useMemo

const useBanner = (array, yardage) => {
  const [bannArr, setBannArr] = useState([]);
  const [bannListIndex, setBannIndex] = useState(1);

 useMemo(() => {
    setBannArr(array.slice(0, yardage));
    setBannIndex(1);
  }, [array, yardage]);

 
  return {
   ....
  };
};

Answer 1

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

Для дорогостоящих операций лучше использовать ленивую инициализацию состояния:

const useBanner = (array, yardage) => {
  const [bannArr, setBannArr] = useState(() => array.slice(0, yardage));
  const [bannListIndex, setBannIndex] = useState(1);

  return {
   ....
  };
};

Не думаю, что в первом хуке тут будет какой-либо выигрыш в производительности.
Во втором ленивую инициализацию делать бессмысленно.

Comments

[miliko mikoyan]

Антон Спирин ещё один вопрос Будут ли меняться пропсы в useBanner ,Вроде нет да.Даже если будут меняться пропсы Banner компонента.

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

miliko mikoyan, смотрите. вызов useBanner будет происходить каждый render компонента. Но аргументы переданные в useState будут использованы только один раз при инициализации. Чтобы не делать лишних операций, сложные вычисления оборачивают в вызов функции, которая будет вызвана всего один раз.
Если не оборачивать, то каждый рендер будет выполняться array.slice(0, yardage), при том что результат этой операции будет использован лишь единожды.
Отвечая на ваш вопрос, если правильно понял, то нет последующие изменения props не повлияют на состояние компонента. Они будут использованы только при инициализации.

[miliko mikoyan]

Антон Спирин, в принципе можно сказать что всё это работает как будто всю это логику useBanner написали в компоненте Banner.

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

miliko mikoyan, так в этом и фишка кастомных хуков вы можете использовать их в разных компонентах. Ну если этого не требуется, то можно написать всю логику в компоненте.

[miliko mikoyan]

Антон Спирин Да согласен Спасибо.

Answer 2

[Robur]

Правильный ответ я уже дал тут: Если props отсутствует Нужно ли использовать memo?

Comments

[Anton Filippov]

я будто попал в Infinite Loop