Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CP Staging] Fix/37253: Console log error when opening thread #37261

Merged
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
8 changes: 8 additions & 0 deletions src/components/FlatList/MVCPFlatList.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const MVCPFlatList = React.forwardRef(({maintainVisibleContentPosition, horizont
const firstVisibleViewRef = React.useRef(null);
const mutationObserverRef = React.useRef(null);
const lastScrollOffsetRef = React.useRef(0);
const isListRenderedRef = React.useRef(false);

const getScrollOffset = React.useCallback(() => {
if (scrollRef.current == null) {
Expand Down Expand Up @@ -137,6 +138,9 @@ const MVCPFlatList = React.forwardRef(({maintainVisibleContentPosition, horizont
}, [adjustForMaintainVisibleContentPosition, getContentView, getScrollOffset, scrollToOffset]);

React.useEffect(() => {
if (!isListRenderedRef.current) {
Copy link
Contributor

@sobitneupane sobitneupane Feb 27, 2024

Choose a reason for hiding this comment

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

@dukenv0307 I think we should add isListRenderedRef.current is dependencyList to make sure this code gets executed at least once.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@sobitneupane I think isListRenderedRef does not need to be added to dependencyList list because it does not make the useEffect calls once it changes

Copy link
Contributor

Choose a reason for hiding this comment

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

@dukenv0307 I don't think with the addition of code in this PR, the useEffect will have any effect at all. Can you pease investigate which PR added the code?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@sobitneupane
Before the change, the useEffect will run in 2 cases:

  1. In initial render of the component (before the list renders, causing this bug)
  2. When any dependencies change

After the change, the useEffect logic will run only in 2nd case (at this point the isListRenderedRef.current is already true).

So the difference is only in In initial render of the component (before the list renders, causing this bug). This is not needed and won't cause any issue because the same logic will be run in onRef here after the list renders.

Btw This is the PR that adds the code.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@sobitneupane We can use state for isListRendered instead of ref if we want to keep the same behavior as before, but I don't think it will be necessary.

Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks for the update @dukenv0307

So the difference is only in In initial render of the component (before the list renders, causing this bug). This is not needed and won't cause any issue because the same logic will be run in onRef here after the list renders.

In that case, we are good to go.

return;
}
requestAnimationFrame(() => {
prepareForMaintainVisibleContentPosition();
setupMutationObserver();
Expand Down Expand Up @@ -186,6 +190,10 @@ const MVCPFlatList = React.forwardRef(({maintainVisibleContentPosition, horizont
onScroll={onScrollInternal}
scrollEventThrottle={1}
ref={onRef}
onLayout={(e) => {
isListRenderedRef.current = true;
props.onLayout?.(e);
}}
/>
);
});
Expand Down
Loading