Is it necessary to use useMemo in hooks?

Question

React

i created useBanner hooks

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

  return {
   ....
  };
};

Am I doing the right thing by throwing the value and props into useState ?
allowable i use useBanner.

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

when props change here.
Will the state change in useBanner.
or is this considered an antipattern I should write it all in 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

For expensive operations, it's better to use lazy state initialization:

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

  return {
   ....
  };
};

I don't think there will be any performance benefit in the first hook.
In the second, lazy initialization is meaningless.

Answer 2

I already gave the correct answer here: If props is missing Do I need to use memo?