Лучше использовать useState или установить как константы в функциональном компоненте (приложение React Native)

Question

У меня есть постоянный userIndex в моем приложении React Native, которое использует функциональные компоненты.

Я инициализирую userIndex, используя следующее:

const [userIndex, setUserIndex] = useState(0); 

У меня также есть константа с именем renderedUserIndex. Мне кажется, что есть два способа установить эту константу:

OPTION A:
const renderedUserIndex = userIndex % 2 === 0 ? userIndex : userIndex + 1; 

Второй:

OPTION B:
const [renderedUserIndex, setRenderedUserIndex] = useState(0);

useState(() => {
   setRenderedUserIndex(userIndex % 2 === 0 ? userIndex : userIndex + 1); 
}, [userIndex]); 

Какой метод предпочтительнее?

Answer 1

Полагаю, вы имели в виду useEffect в последнем фрагменте и ответили на такой вопрос.

Вариант A определенно является способом go. Если вы используете renderedUserIndex в одном и том же функциональном компоненте, тогда действительно нет причин сохранять его в собственном состоянии.

Можно использовать вариант B, если вам нужно, чтобы два индекса в какой-то момент расходились, но в противном случае он не понадобится.

Answer 2

Лучшая оценка будет следующей

const renderUserIndex = useMemo(() => userIndex % 2 === 0 ? userIndex : userIndex + 1 , [userIndex])

Поскольку теперь renderUserIndex будет вычисляться только тогда, когда userIndex изменится, означает s Он не будет вычисляться без необходимости при каждой визуализации.