Что лучше использовать для начального значений функции или useMemo?

Question

[miliko mikoyan]

У меня есть вот такой компонент
Что лучше использовать для начального значения useState, функции или useMemo.

Я знаю только два способа дать начальные значения useState. Я привел два примера. Но я не уверен, какой способ лучше. Каковы плюсы и минусы? Или есть третий вариант?

вариант 1

function App(yardage, arrList, indxList) {
  const [flippingListIndx, setFlippingListIndx] = useState(() => {
    const arrStart = Math.floor(indxList / yardage) * yardage;
    if (indxList < arrList.length) {
      return arrStart + yardage;
    } else {
      return arrStart - yardage;
    }
  });
  const [flippingList, setFlippingList] = useState(() => {
    const arrStart = Math.floor(indxList / yardage) * yardage;
    if (indxList < arrList.length) {
      return arrList.slice(arrStart, arrStart + yardage);
    } else {
      return arrList.slice(arrStart - yardage, arrStart);
    }
  });
  return (
    ....
  );
}

в принципе второй вариант это не начальное значение но можно и так сказать.

вариант 2

function App(yardage, arrList, indxList) {
  const [flippingListIndx, setFlippingListIndx] = useState(0);
  const [flippingList, setFlippingList] = useState([]);

  useMemo(() => {
      const arrStart = Math.floor(indxList / yardage) * yardage;
      if (indxList < arrList.length) {
          setFlippingList(
              arrList.slice(
                  arrStart,
                  arrStart + yardage
              )
          );
          setFlippingListIndx(arrStart + yardage);
      } else {
          setFlippingList(
              arrList.slice(
                  arrStart - yardage,
                  arrStart
              )
          );
          setFlippingListIndx(arrStart - yardage);
      }
  }, [arrList, yardage, indxList])
  return (
    ....
  );
}

Answer 1

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

Второй вариант переопределит вам состояние при изменении arrList, yardage, indxList. Лучше первый.
Лучше первый. Третьим вариантом будет использование классовых компонентов, код, которых в ряде случаев будет как минимум читаемее.

Comments

[miliko mikoyan]

Антон Спирин Привет..можешь по-другому объяснить По 3 вариант.

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

miliko mikoyan, например:

const computeStateByProps = ({ yardage, arrList, indxList }) => {
  const arrStart = Math.floor(indxList / yardage) * yardage;

  if (indxList < arrList.length) {
    return {
      index: arrStart + yardage,
      list: arrList.slice(arrStart, arrStart + yardage),
    };
  }

  return {
    index: arrStart - yardage,
    list: arrList.slice(arrStart - yardage, arrStart),
  };
};

class App extends React.Component {
  state = computeStateByProps(this.props);
  
  render () {
    return(
      ....
    );
  }
}

Классы удобно использовать в компонентах с большим количеством методов и в компонентах, которые вешают на нативные события document или window хандлеры в которых используется внутреннее состояние.

[miliko mikoyan]

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