diff --git a/src/components/DatePicker/CalendarPicker/index.tsx b/src/components/DatePicker/CalendarPicker/index.tsx index 9906f9b04c3c..4e1fef2d827e 100644 --- a/src/components/DatePicker/CalendarPicker/index.tsx +++ b/src/components/DatePicker/CalendarPicker/index.tsx @@ -53,14 +53,14 @@ function CalendarPicker({ const {preferredLocale, translate} = useLocalize(); const pressableRef = useRef(null); - const [currentDateView, setCurrentDateView] = useState(getInitialCurrentDateView(value, minDate, maxDate)); + const [currentDateView, setCurrentDateView] = useState(() => getInitialCurrentDateView(value, minDate, maxDate)); const [isYearPickerVisible, setIsYearPickerVisible] = useState(false); const minYear = getYear(new Date(minDate)); const maxYear = getYear(new Date(maxDate)); - const [years, setYears] = useState( + const [years, setYears] = useState(() => Array.from({length: maxYear - minYear + 1}, (v, i) => i + minYear).map((year) => ({ text: year.toString(), value: year, diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx index 140d3f5eccc4..a77993e90f92 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.tsx +++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx @@ -73,7 +73,7 @@ function BaseVideoPlayer({ const [isEnded, setIsEnded] = useState(false); const [isBuffering, setIsBuffering] = useState(true); // we add "#t=0.001" at the end of the URL to skip first milisecond of the video and always be able to show proper video preview when video is paused at the beginning - const [sourceURL] = useState(VideoUtils.addSkipTimeTagToURL(url.includes('blob:') || url.includes('file:///') ? url : addEncryptedAuthTokenToURL(url), 0.001)); + const [sourceURL] = useState(() => VideoUtils.addSkipTimeTagToURL(url.includes('blob:') || url.includes('file:///') ? url : addEncryptedAuthTokenToURL(url), 0.001)); const [isPopoverVisible, setIsPopoverVisible] = useState(false); const [popoverAnchorPosition, setPopoverAnchorPosition] = useState({horizontal: 0, vertical: 0}); const [controlStatusState, setControlStatusState] = useState(controlsStatus); diff --git a/src/pages/Debug/DebugDetailsDateTimePickerPage.tsx b/src/pages/Debug/DebugDetailsDateTimePickerPage.tsx index b2be1429ee5b..c1bda9d4da8b 100644 --- a/src/pages/Debug/DebugDetailsDateTimePickerPage.tsx +++ b/src/pages/Debug/DebugDetailsDateTimePickerPage.tsx @@ -26,7 +26,7 @@ function DebugDetailsDateTimePickerPage({ }: DebugDetailsDateTimePickerPageProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const [date, setDate] = useState(DateUtils.extractDate(fieldValue)); + const [date, setDate] = useState(() => DateUtils.extractDate(fieldValue)); return ( diff --git a/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx b/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx index fb6fa1b6b13e..2066ab71c639 100644 --- a/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx +++ b/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx @@ -48,7 +48,7 @@ function DebugReportActionCreatePage({ const styles = useThemeStyles(); const [session] = useOnyx(ONYXKEYS.SESSION); const [personalDetailsList] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); - const [draftReportAction, setDraftReportAction] = useState(getInitialReportAction(reportID, session, personalDetailsList)); + const [draftReportAction, setDraftReportAction] = useState(() => getInitialReportAction(reportID, session, personalDetailsList)); const [error, setError] = useState(); return ( diff --git a/src/pages/Debug/TransactionViolation/DebugTransactionViolationCreatePage.tsx b/src/pages/Debug/TransactionViolation/DebugTransactionViolationCreatePage.tsx index 4a036478f93e..b5f3d0d603d5 100644 --- a/src/pages/Debug/TransactionViolation/DebugTransactionViolationCreatePage.tsx +++ b/src/pages/Debug/TransactionViolation/DebugTransactionViolationCreatePage.tsx @@ -63,7 +63,7 @@ function DebugTransactionViolationCreatePage({ const {translate} = useLocalize(); const styles = useThemeStyles(); const [transactionViolations] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`); - const [draftTransactionViolation, setDraftTransactionViolation] = useState(getInitialTransactionViolation()); + const [draftTransactionViolation, setDraftTransactionViolation] = useState(() => getInitialTransactionViolation()); const [error, setError] = useState(); const editJSON = useCallback( diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx index 429d92440dd7..d05f0fa5c64a 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx @@ -203,7 +203,7 @@ function ReimbursementAccountPage({route, policy}: ReimbursementAccountPageProps which acts similarly to `componentDidUpdate` when the `reimbursementAccount` dependency changes. */ const [hasACHDataBeenLoaded, setHasACHDataBeenLoaded] = useState(reimbursementAccount !== CONST.REIMBURSEMENT_ACCOUNT.DEFAULT_DATA && isPreviousPolicy); - const [shouldShowContinueSetupButton, setShouldShowContinueSetupButton] = useState(getShouldShowContinueSetupButtonInitialValue()); + const [shouldShowContinueSetupButton, setShouldShowContinueSetupButton] = useState(() => getShouldShowContinueSetupButtonInitialValue()); const handleNextNonUSDBankAccountStep = () => { switch (nonUSDBankAccountStep) { diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index ff6f635e3c6f..688d0d675cd6 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/src/pages/home/report/ReportActionsList.tsx @@ -162,7 +162,7 @@ function ReportActionsList({ const reportScrollManager = useReportScrollManager(); const userActiveSince = useRef(DateUtils.getDBTime()); const lastMessageTime = useRef(null); - const [isVisible, setIsVisible] = useState(Visibility.isVisible()); + const [isVisible, setIsVisible] = useState(Visibility.isVisible); const isFocused = useIsFocused(); const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`); diff --git a/src/pages/iou/request/step/IOURequestStepAttendees.tsx b/src/pages/iou/request/step/IOURequestStepAttendees.tsx index f1d253db0c18..409ef1cfe02d 100644 --- a/src/pages/iou/request/step/IOURequestStepAttendees.tsx +++ b/src/pages/iou/request/step/IOURequestStepAttendees.tsx @@ -40,7 +40,7 @@ function IOURequestStepAttendees({ }: IOURequestStepAttendeesProps) { const isEditing = action === CONST.IOU.ACTION.EDIT; const [transaction] = useOnyx(`${isEditing ? ONYXKEYS.COLLECTION.TRANSACTION : ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID || -1}`); - const [attendees, setAttendees] = useState(TransactionUtils.getAttendees(transaction)); + const [attendees, setAttendees] = useState(() => TransactionUtils.getAttendees(transaction)); const previousAttendees = usePrevious(attendees); const {translate} = useLocalize(); const [violations] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`); diff --git a/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.tsx b/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.tsx index db36e60de4d0..55c0100a84db 100644 --- a/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.tsx +++ b/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.tsx @@ -1,7 +1,6 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import type {OnyxEntry} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; import FormProvider from '@components/Form/FormProvider'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -19,7 +18,6 @@ import * as ValidationUtils from '@libs/ValidationUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type * as OnyxTypes from '@src/types/onyx'; type CustomStatusTypes = ValueOf; @@ -30,13 +28,6 @@ type StatusType = { isSelected: boolean; }; -type StatusClearAfterPageOnyxProps = { - /** User's custom status */ - customStatus: OnyxEntry; -}; - -type StatusClearAfterPageProps = StatusClearAfterPageOnyxProps; - /** * @param data - either a value from CONST.CUSTOM_STATUS_TYPES or a dateTime string in the format YYYY-MM-DD HH:mm */ @@ -80,14 +71,15 @@ const useValidateCustomDate = (data: string) => { return {customDateError, customTimeError, validateCustomDate}; }; -function StatusClearAfterPage({customStatus}: StatusClearAfterPageProps) { +function StatusClearAfterPage() { const styles = useThemeStyles(); const {translate} = useLocalize(); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const clearAfter = currentUserPersonalDetails.status?.clearAfter ?? ''; + const [customStatus] = useOnyx(ONYXKEYS.CUSTOM_STATUS_DRAFT); const draftClearAfter = customStatus?.clearAfter ?? ''; - const [draftPeriod, setDraftPeriod] = useState(getSelectedStatusType(draftClearAfter || clearAfter)); + const [draftPeriod, setDraftPeriod] = useState(() => getSelectedStatusType(draftClearAfter || clearAfter)); const statusType = useMemo( () => Object.entries(CONST.CUSTOM_STATUS_TYPES).map(([key, value]) => ({ @@ -222,8 +214,4 @@ function StatusClearAfterPage({customStatus}: StatusClearAfterPageProps) { StatusClearAfterPage.displayName = 'StatusClearAfterPage'; -export default withOnyx({ - customStatus: { - key: ONYXKEYS.CUSTOM_STATUS_DRAFT, - }, -})(StatusClearAfterPage); +export default StatusClearAfterPage; diff --git a/src/pages/settings/Subscription/CardSection/CardSection.tsx b/src/pages/settings/Subscription/CardSection/CardSection.tsx index bf0fdcbb6da3..153c5a65b3b4 100644 --- a/src/pages/settings/Subscription/CardSection/CardSection.tsx +++ b/src/pages/settings/Subscription/CardSection/CardSection.tsx @@ -65,7 +65,7 @@ function CardSection() { Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query})); }, []); - const [billingStatus, setBillingStatus] = useState(CardSectionUtils.getBillingStatus(translate, defaultCard?.accountData ?? {})); + const [billingStatus, setBillingStatus] = useState(() => CardSectionUtils.getBillingStatus(translate, defaultCard?.accountData ?? {})); const nextPaymentDate = !isEmptyObject(privateSubscription) ? CardSectionUtils.getNextBillingDate() : undefined; diff --git a/src/pages/workspace/companyCards/assignCard/TransactionStartDateStep.tsx b/src/pages/workspace/companyCards/assignCard/TransactionStartDateStep.tsx index fc0feb07848f..0b655548548f 100644 --- a/src/pages/workspace/companyCards/assignCard/TransactionStartDateStep.tsx +++ b/src/pages/workspace/companyCards/assignCard/TransactionStartDateStep.tsx @@ -27,7 +27,7 @@ function TransactionStartDateStep() { const [dateOptionSelected, setDateOptionSelected] = useState(data?.dateOption ?? CONST.COMPANY_CARD.TRANSACTION_START_DATE_OPTIONS.FROM_BEGINNING); const [isModalOpened, setIsModalOpened] = useState(false); - const [startDate, setStartDate] = useState(format(new Date(), CONST.DATE.FNS_FORMAT_STRING)); + const [startDate, setStartDate] = useState(() => format(new Date(), CONST.DATE.FNS_FORMAT_STRING)); const handleBackButtonPress = () => { if (isEditing) {