diff --git a/docs/docs/en/guide/_meta.json b/docs/docs/en/guide/_meta.json index 169ecfc..8f63a4c 100644 --- a/docs/docs/en/guide/_meta.json +++ b/docs/docs/en/guide/_meta.json @@ -8,5 +8,6 @@ "type": "dir", "name": "usage", "label": "Usage" - } + }, + "performance-optimization-tips" ] diff --git a/docs/docs/en/guide/performance-optimization-tips.mdx b/docs/docs/en/guide/performance-optimization-tips.mdx new file mode 100644 index 0000000..02c9dd2 --- /dev/null +++ b/docs/docs/en/guide/performance-optimization-tips.mdx @@ -0,0 +1,91 @@ +# Performance Optimization Tips + +#### Wrap the `renderItem` function with `useCallback` to prevent unnecessary re-renders. + +```tsx +import { useCallback, useState } from 'react'; // [!code highlight] +import { ScrollView, Image, Modal } from 'react-native'; +import { GestureViewer } from 'react-native-gesture-image-viewer'; + +function App() { + const images = [...]; + const [visible, setVisible] = useState(false); + + // [!code highlight:3] + const renderImage = useCallback((imageUrl: string) => { + return ; + }, []); + + return ( + setVisible(false)}> + setVisible(false)} + /> + + ); +} +``` + +#### For large images, we recommend using [`expo-image`](https://docs.expo.dev/versions/latest/sdk/image/) or [`FastImage`](https://github.com/DylanVann/react-native-fast-image). + +```tsx +import { ScrollView, Modal } from 'react-native'; +import { GestureViewer } from 'react-native-gesture-image-viewer'; +import { Image } from 'expo-image'; // [!code highlight] + +function App() { + const images = [...]; + const [visible, setVisible] = useState(false); + + const renderImage = useCallback((imageUrl: string) => { + return ; // [!code highlight] + }, []); + + return ( + setVisible(false)}> + setVisible(false)} + /> + + ); +} +``` + +#### For handling many images, we recommend using [`FlashList`](https://shopify.github.io/flash-list/). + +- [FlashList Performance Guide](https://shopify.github.io/flash-list/docs/fundamentals/performance) + +```tsx +import { useCallback, useState } from 'react'; +import { Image, Modal } from 'react-native'; +import { GestureViewer } from 'react-native-gesture-image-viewer'; +import { FlashList } from '@shopify/flash-list'; // [!code highlight] + +function App() { + const images = [...]; + const [visible, setVisible] = useState(false); + + const renderImage = useCallback((imageUrl: string) => { + return ; + }, []); + + return ( + setVisible(false)}> + setVisible(false)} + /> + + ); +} +``` + +#### Test on actual devices (performance may be limited in simulators). diff --git a/docs/docs/ko/guide/_meta.json b/docs/docs/ko/guide/_meta.json index 9cc7069..ec82608 100644 --- a/docs/docs/ko/guide/_meta.json +++ b/docs/docs/ko/guide/_meta.json @@ -8,5 +8,6 @@ "type": "dir", "name": "usage", "label": "사용법" - } + }, + "performance-optimization-tips" ] diff --git a/docs/docs/ko/guide/performance-optimization-tips.mdx b/docs/docs/ko/guide/performance-optimization-tips.mdx new file mode 100644 index 0000000..d525b63 --- /dev/null +++ b/docs/docs/ko/guide/performance-optimization-tips.mdx @@ -0,0 +1,91 @@ +# 성능 최적화 팁 + +#### `renderItem` 함수는 `useCallback`으로 감싸서 불필요한 리렌더링을 방지하세요. + +```tsx +import { useCallback, useState } from 'react'; // [!code highlight] +import { ScrollView, Image, Modal } from 'react-native'; +import { GestureViewer } from 'react-native-gesture-image-viewer'; + +function App() { + const images = [...]; + const [visible, setVisible] = useState(false); + + // [!code highlight:3] + const renderImage = useCallback((imageUrl: string) => { + return ; + }, []); + + return ( + setVisible(false)}> + setVisible(false)} + /> + + ); +} +``` + +#### 대용량 이미지의 경우 [`expo-image`](https://docs.expo.dev/versions/latest/sdk/image/)나 [`FastImage`](https://github.com/DylanVann/react-native-fast-image) 사용을 권장합니다. + +```tsx +import { ScrollView, Modal } from 'react-native'; +import { GestureViewer } from 'react-native-gesture-image-viewer'; +import { Image } from 'expo-image'; // [!code highlight] + +function App() { + const images = [...]; + const [visible, setVisible] = useState(false); + + const renderImage = useCallback((imageUrl: string) => { + return ; // [!code highlight] + }, []); + + return ( + setVisible(false)}> + setVisible(false)} + /> + + ); +} +``` + +#### 많은 수의 이미지를 다룰 때는 [`FlashList`](https://shopify.github.io/flash-list/) 사용을 권장합니다. + +- [FlashList Performance 가이드](https://shopify.github.io/flash-list/docs/fundamentals/performance) + +```tsx +import { useCallback, useState } from 'react'; +import { Image, Modal } from 'react-native'; +import { GestureViewer } from 'react-native-gesture-image-viewer'; +import { FlashList } from '@shopify/flash-list'; // [!code highlight] + +function App() { + const images = [...]; + const [visible, setVisible] = useState(false); + + const renderImage = useCallback((imageUrl: string) => { + return ; + }, []); + + return ( + setVisible(false)}> + setVisible(false)} + /> + + ); +} +``` + +#### 디바이스에서 테스트하세요. (시뮬레이터에서는 성능이 제한될 수 있습니다.)