react: использование или не использование состояния в функциональном компоненте

Question

Рейтинг: 1Ответов: 1Опубликовано: 23.08.2023

Теоретический вопрос (не очень улавливаю различия).

Есть компонент:

const MyComponent = (props: MyComponentProps) => {
    [data] = useState(() => prepareData());
    return <></>;
}

Вопрос:

В каких случаях НУЖНО ИСПОЛЬЗОВАТЬ состояние без функции его изменения (как в примере выше) и вариант:

const MyComponent = (props: MyComponentProps) => {
    const data = prepareData();
    return <></>;
}

будет неподходящим?

Answer 1

▲ 1

Функциональный компонент представляет из себя просто функцию рендера.

Соответственно, при каждом рендере выполняется данная функция.

При вызове каждый раз создаются и инициализируются локальные переменные. В Случае с

const data = prepareData();

функция prepareData будет вызываться каждый раз.

Если нужно сохранить состояние между вызовами функции и используется хук useState.

В случае с

const [data] = useState(() => prepareData());

функция prepareData вызовется только в первый раз, далее будет возвращаться значение.

Ответы