callstack / callstack/react-native-pager-view

Memory Leaks when component is disposed

Đang mở
#702 9 bình luận 4 reaction 1 người được giao Được giao cho @Copilot Xem trên GitHub
bug ios
Ngôn ngữ chính
TypeScript
Star
3.4k
Fork
476
Merge trung bình
10 ngày 21 giờ
Pull request đã merge (30 ngày)
2

Mô tả

## Environment

System:
OS: macOS 13.2.1
CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Memory: 16.34 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 8.15.0 - ~/.nvm/versions/node/v16.17.1/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5522156
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.3 => 0.71.3
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found

## Description

When using pager view with larger resources, memory seems to leak by the amount contained in the active page.
Originally discovered in a project using a routing library but for this example the toggle component simulates a page disposal.
As resources are proportionally small for the example to reproduce press the toggle button multiple times
Although the leaking memory from this example is small It has been able to reach over 8gb where images have client side processing applied such as grayscale.

Memory Profile with pager view included
image

Memory Profile with pager view excluded

image

## Reproducible Demo

```
import React, { useMemo, useState, useCallback } from 'react';
import {
View,
Button,
StyleSheet,
SafeAreaView,
} from 'react-native';

import FastImage from 'react-native-fast-image'

import PagerView from 'react-native-pager-view';

const data = new Array(100).fill(1)

function App() {
const [visible, setVisible] = useState(true)

const onPress = useCallback(() => {
setVisible((x) => !x)
}, [])

return (








);
};

function Toggle({ visible, children }) {
return visible
? children
: null
}

function Pager() {
const content = useMemo(() => {
return data.map((x, i) => {
return
})
}, [data])

return (
// Apply comment to the below line to demo memory is stable without this component


{content}


)
}

function Image({ value }) {
const source = useMemo(() => {
const i = value % 40
return { uri: `https://unsplash.it/1200/1200?image=${i}` }
}, [value])

return (

)
}

const styles = StyleSheet.create({
pagerView: {
flex: 1,
},
image: {
margin: 8,
aspectRatio: 1,
width: 400,
height: 400
}
});

export default App
```

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.