Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions src/components/OptionListContextProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -266,11 +266,13 @@ const useOptionsList = (options?: {shouldInitialize: boolean}) => {
const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: false});
const [internalOptions, setInternalOptions] = useState<OptionList>(optionsList);
const prevOptions = useRef<OptionList>(null);
const [areInternalOptionsInitialized, setAreInternalOptionsInitialized] = useState(false);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just wondering, why did you choose to use state instead of ref as you suggested earlier?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I faced an edge case where the list was not currently re-rendered with the correct value areInternalOptionsInitialized ref value.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! Mind sharing how to trigger that edge case?


useEffect(() => {
if (!prevOptions.current) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like the new part isn't related to the rest of the effect and has different dependencies. Why not add a separate effect for it?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

agreed, updated.

prevOptions.current = optionsList;
setInternalOptions(optionsList);
setAreInternalOptionsInitialized(areOptionsInitialized);
return;
}
/**
Expand All @@ -283,7 +285,8 @@ const useOptionsList = (options?: {shouldInitialize: boolean}) => {
return;
}
setInternalOptions(optionsList);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
setInternalOptions(optionsList);
setInternalOptions(optionsList);
setAreInternalOptionsInitialized(areOptionsInitialized);

Same suggestion for the other setInternalOptions().

}, [optionsList]);
setAreInternalOptionsInitialized(areOptionsInitialized);
}, [optionsList, areOptionsInitialized]);

@QichenZhu QichenZhu Jul 24, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noticed an unused dependency areOptionsInitialized. Is that intentional?

Please ignore this comment for now.


useEffect(() => {
if (!shouldInitialize || areOptionsInitialized || isLoadingApp) {
Expand All @@ -293,14 +296,19 @@ const useOptionsList = (options?: {shouldInitialize: boolean}) => {
initializeOptions();
}, [shouldInitialize, initializeOptions, areOptionsInitialized, isLoadingApp]);

const resetInternalOptions = useCallback(() => {
setAreInternalOptionsInitialized(false);
resetOptions();
}, [resetOptions]);

return useMemo(
() => ({
initializeOptions,
options: internalOptions,
areOptionsInitialized,
resetOptions,
areOptionsInitialized: areInternalOptionsInitialized,
resetOptions: resetInternalOptions,
}),
[initializeOptions, internalOptions, areOptionsInitialized, resetOptions],
[initializeOptions, internalOptions, resetInternalOptions, areInternalOptionsInitialized],
);
};

Expand Down
Loading