アプリのパフォーマンスに関するベストプラクティス

import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  Button,
  FlatList,
  TouchableOpacity
} from 'react-native';

// 悪い例： メモ化されていないデータと関数
const BadPracticeApp = () => {
  const [count, setCount] = useState(0);
  const [selectedItem, setSelectedItem] = useState(null);

  // レンダリングのたびにコストの高い計算が実行され、BadPracticeAppレベルの再レンダリング時には新しい関数インスタンスが生成されます。
  const sumOfSquares = (num) => {
    console.log('平方和を計算します...');
    return Array.from(
      { length: num },
      (_, i) => (i + 1) ** 2
    ).reduce((acc, val) => acc + val, 0);
  };

  // dataはBadPracticeAppの再レンダリングのたびに再作成されます。
  const data = Array.from(
    { length: 50 },
    (_, i) => `Item ${i + 1}`
  );

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <Text>Sum of squares: {sumOfSquares(10)}</Text>
      <Button
        title="カウントを増やす"
        onPress={() => setCount(count + 1)}
      />
      <FlatList
        data={data}
        keyExtractor={(item) => item} // 匿名関数が使用されているため、再レンダリングのたびに新しい関数インスタンスが作成されます。
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => setSelectedItem(item)}>
            <Text
              style={{
                padding: 10,
                backgroundColor:
                  item === selectedItem ? 'lightblue' : 'white'
              }}>
              {item}
            </Text>
          </TouchableOpacity>
        )} // 匿名関数が使用されているため、再レンダリングのたびに新しい関数インスタンスが作成され、返された関数コンポーネントはメモ化されません。
      />
    </View>
  );
};

export default BadPracticeApp;

import React, {
  memo,
  StrictMode,
  useState,
  useMemo,
  useCallback,
  useTransition
} from 'react';
import {
  View,
  Text,
  Button,
  FlatList,
  TouchableOpacity,
  ActivityIndicator
} from 'react-native';

// 不要な再レンダリングを防ぐためにメモ化されたItemコンポーネント
const Item = memo(({ item, isSelected, onPress }) => {
  return (
    <TouchableOpacity onPress={() => onPress(item)}>
      <Text
        style={{
          padding: 10,
          backgroundColor: isSelected ? 'lightblue' : 'white'
        }}>
        {item}
      </Text>
    </TouchableOpacity>
  );
});

const BestPracticeApp = () => {
  const [count, setCount] = useState(0);
  const [selectedItem, setSelectedItem] = useState(null);
  const [isPending, startTransition] = useTransition(); // 緊急でない更新の処理用

  // コストの高い計算をメモ化します。
  const sumOfSquares = useMemo(() => {
    console.log('平方和を計算します...');
    return Array.from(
      { length: 10 },
      (_, i) => (i + 1) ** 2
    ).reduce((acc, val) => acc + val, 0);
  }, []); // 依存関係が変更された場合にのみ再計算されます（この場合はなし）。

  // dataをメモ化して配列の不要な再作成を防ぎます。
  const data = useMemo(
    () => Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`),
    []
  );

  // renderItem関数をメモ化して不要な再レンダリングを防ぎます。
  const renderItem = useCallback(
    ({ item }) => (
      <Item
        item={item}
        isSelected={item === selectedItem}
        onPress={handleSelectItem}
      />
    ),
    [selectedItem] // selectedItemの変更時にのみ再作成されます。
  );

  // アイテムが選択されたときの遅延処理（追加データの取得など）をシミュレートします。
  const handleSelectItem = (item) => {
    startTransition(() => {
      setSelectedItem(item); // 選択されたアイテムをマークします。
    });
  };

  return (
    <StrictMode>
      <View style={{ flex: 1, padding: 20 }}>
        <Text>Sum of squares: {sumOfSquares}</Text>
        <Button
          title="カウントを増やす"
          onPress={() => setCount(count + 1)}
        />
        <Text>カウント：{count}</Text>

        <FlatList
          data={data}
          keyExtractor={(item) => item}
          renderItem={renderItem}
          getItemLayout={(data, index) => ({
            length: 50,
            offset: 50 * index,
            index
          })}
        />

        {isPending && (
          <ActivityIndicator size="large" color="#0000ff" />
        )}
      </View>
    </StrictMode>
  );
};

export default BestPracticeApp;

useEffect(() => {
  const keyboardShowListenerHandler = Keyboard.addListener(
    'keyboardDidShow',
    handleKeyboardDidShow
  );
  return () => {
    keyboardShowListenerHandler.remove();
  };
}, []);

vda shell vmsgr send "pkg://com.amazon.keplersampleapp.main?SHOW_OVERDRAWN=true"

npx react-native-bundle-visualizer