Bug: Initial render swiper is rendered 3 times

[elitenas]

On initial render, the swiper is being rendered 3 times. This can be problematic if there are a lot of items in the array.

In the demo, you can see 7 items in the array but the logs happen 21 times

Demo: https://snack.expo.dev/@muslimplusapp/react-native-awesome-carousel

[jeongshin]

I'm sorry but I can't help with this issue since all re-renderings at initial layout are necessary.

Here's other options you can do

1. memoize your heavy components

import Item from './Item';

const App = () => {
  const [currentIndex, setCurrentIndex] = useState(3);

  const renderItem = useCallback(
    (item, index) => (
      <Item currentIndex={currentIndex} item={item} index={index} />
    ),
    [currentIndex],
  );

  return (
    <DynamicItemScrollSwiper
      horizontal
      data={colors}
      viewOffset={0}
      renderItem={renderItem}
      activeIndex={currentIndex}
    />
  );
};

const Item = ({ currentIndex, item, index }) => {
    return <View>{/* your codes */}</View>
};

// memoize
export default React.memo(Item);

this might reduce re-rendering issue.

2. if your layout has fixed dimension items

recommend to use FlatList API or FlashList with estimatedItemSize

I'll close this issue. Thank you!

[elitenas]

That makes sense. Thanks for the clarifying.