CODEWITHSUNDEEP
reactjsreact-native
Kerry
Kerry

Reputation: 454

Is it good idea to ignore the warning message `VirtualizedLists should never be nested inside plain ScrollViews`

I am beginner in react native

I am trying to use flatList in react native, The thing is that I need to use ScrollView and flatList at the same time because I am showing a lot of items.

So I write the component something like this

import React, {useEffect, useState} from 'react';


const windowWidth = Dimensions.get('window').width;

const isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
  const paddingToBottom = 20;
  return (
    layoutMeasurement.height + contentOffset.y >=
    contentSize.height - paddingToBottom
  );
};

const BikeScreen = ({navigation}) => {
  const [renderDataCount, setRenderDataCount] = useState(10);

  const bikeList = useSelector((state) => state.productReducer.bikeList);
  const token = useSelector((state) => state.authReducer.token);

  const dispatch = useDispatch();

  

  useEffect(() => {
    LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
  }, []);

  const stateChange = () => {
    setChildState(!childState);
  };

const renderItems = ({ item }) => (
    <IndividualProduct
      info={item}
      fav={true}
      stateChange={stateChange}
      setLoading={setLoading}
    />
  );

  return (
    <ScrollView
      onScroll={({nativeEvent}) => {
        if (isCloseToBottom(nativeEvent)) {
          if (renderDataCount + 4 < bikeList.length) {
            setRenderDataCount(renderDataCount + 4);
          } else if (renderDataCount + 1 < bikeList.length) {
            setRenderDataCount(renderDataCount + 1);
          }
        }
      }}
      scrollEventThrottle={400}>
      <Loader loading={loading} />

      {bikeList.length > 1 && (
        <FlatList
          data={bikeList}
          renderItem={renderItems}
          keyExtractor={(item) => item.name}
        />
      )}
    </ScrollView>
  );
};

export default BikeScreen;

So when I try to use both ScrollView and flatList I got the error log something like this

WARNING : VirtualizedLists should never be nested inside plain ScrollViews

So as you can see in the code I am using useEffect hook to ignore the warning.

The thing is that the data coming from the api is alot numbering up to 400 items in bikelist So I am concern about the performance issue.

What I want to know is that Is Ignoring this warning statement a good idea? And is there anyway this is effecting my app performance?

Upvotes: 0

Views: 226

Answers (1)

UjinT34
UjinT34

Reputation: 4987

https://nyxo.app/fixing-virtualizedlists-should-never-be-nested-inside-plain-scrollviews

Why nesting VirtualizedList inside a plain ScrollView is bad?

Virtualized lists, that means and for example, are performance-optimized meaning they massively improve memory consumption and performance when using them to render large lists of content. The way this optimization works is that it only renders the content that is currently visible in the window, usually meaning the container/screen of your device. It also replaces all the other list items same sized blank space and renders them based on your scrolling position.

Now If you put either of these two lists inside a ScrollView they fail to calculate the size of the current window and will instead try to render everything, possibly causing performance problems, and it will of course also give you the warning mentioned before.

Upvotes: 1

Related Questions