Re-render one component inside FlashList, but the second one shouldn't re-render. How to accomplish that?

[belkocik]

Hello. Is it possible to accomplish this?

I would like to re-render only the component which has rssi value in it, but the component with device name should stay the same.

import {View, Text} from 'react-native';
import React, {useEffect} from 'react';
import useBLE from '@/hooks/useBLE';
import {Button} from 'react-native-paper';
import {FlashList} from '@shopify/flash-list';
import {Device} from 'react-native-ble-plx';

const HomeScreen = () => {
  const {allDevices, scanForPeripherals, requestPermissions} = useBLE();

  useEffect(() => {
    const scanForDevices = () => {
      requestPermissions(isGranted => {
        if (isGranted) {
          scanForPeripherals();
        }
      });
    };

    scanForDevices();
  }, []);

  const keyExtractor = (item: Device) => item.id;

  return (
    <View>
      <Text style={{fontSize: 28, marginBottom: 18}}>HomeScreen</Text>
      <View style={{height: 500}}>
        <Text style={{fontSize: 24}}>AllDevices</Text>
        <FlashList
          data={allDevices}
          keyExtractor={keyExtractor}
          renderItem={({item}) => (
            <View
              key={item.id}
              style={{
                flexDirection: 'row',
                justifyContent: 'space-evenly',
                alignItems: 'center',
                marginTop: 10,
              }}>
              {/* DON'T RE-RENDER IF A RSSI VALUE HAS CHANGED */}
              <BluetoothDeviceName deviceName={item.name} />
              <View>
                <Text>-</Text>
              </View>
              {/* RE-RENDER IF RSSI VALUES HAS CHANGED */}
              <BluetoothDeviceRssi rssi={item.rssi} />
            </View>
          )}
          estimatedItemSize={80}
        />
      </View>
    </View>
  );
};

export default HomeScreen;

const BluetoothDeviceName = ({deviceName}: {deviceName: string | null}) => {
  return (
    <View>
      <Button mode="contained">{deviceName}</Button>
    </View>
  );
};

const BluetoothDeviceRssi = ({rssi}: {rssi: number | null}) => {
  return (
    <View>
      <Button mode="outlined">rssi: {rssi}</Button>
    </View>
  );
};

What I should do in my scanning bluetooth devices function: scanForPeripherals and FlashList to re-render only the BluetoothDeviceRssi component, but BluetoothDeviceName should stay the same?

useBle.tsx

import {Dispatch, useState} from 'react';
import {PermissionsAndroid, Platform} from 'react-native';
import {BleManager, Device} from 'react-native-ble-plx';
import {PERMISSIONS, requestMultiple} from 'react-native-permissions';
import DeviceInfo from 'react-native-device-info';

const bleManager = new BleManager();

type VoidCallback = (result: boolean) => void;

interface BluetoothLowEnergyApi {
  requestPermissions(cb: VoidCallback): Promise<void>;
  scanForPeripherals(): void;
  allDevices: Device[];
  setAllDevices: Dispatch<React.SetStateAction<Device[]>>;
}

function useBLE(): BluetoothLowEnergyApi {
  const [allDevices, setAllDevices] = useState<Device[]>([]);
  // console.log('🚀 ~ useBLE ~ freshAllDevices:', freshAllDevices);

  const requestPermissions = async (cb: VoidCallback) => {
    if (Platform.OS === 'android') {
      const apiLevel = await DeviceInfo.getApiLevel();

      if (apiLevel < 31) {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
          {
            title: 'Location Permission',
            message: 'Bluetooth Low Energy requires Location',
            buttonNeutral: 'Ask Later',
            buttonNegative: 'Cancel',
            buttonPositive: 'OK',
          },
        );
        cb(granted === PermissionsAndroid.RESULTS.GRANTED);
      } else {
        const result = await requestMultiple([
          PERMISSIONS.ANDROID.BLUETOOTH_SCAN,
          PERMISSIONS.ANDROID.BLUETOOTH_CONNECT,
          PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
        ]);

        const isGranted =
          result['android.permission.BLUETOOTH_CONNECT'] === PermissionsAndroid.RESULTS.GRANTED &&
          result['android.permission.BLUETOOTH_SCAN'] === PermissionsAndroid.RESULTS.GRANTED &&
          result['android.permission.ACCESS_FINE_LOCATION'] === PermissionsAndroid.RESULTS.GRANTED;

        cb(isGranted);
      }
    } else {
      cb(true);
    }
  };

  const isDuplicateDevice = (devices: Device[], nextDevice: Device) =>
    devices.findIndex(device => nextDevice.id === device.id) > -1;

  const isRssiChanged = (devices: Device[], nextDevice: Device) =>
    devices.findIndex(device => nextDevice.rssi !== device.rssi) > -1;

  const scanForPeripherals = () => {
    return bleManager.startDeviceScan(null, null, (error, device) => {
      // console.log('🚀 ~ bleManager.startDeviceScan ~ ^^^ device ^^^:', device);
      if (error) {
        console.log('startDeviceScan error', JSON.stringify(error));
      }
      if (device && device.name !== null && device.localName !== null) {
        setAllDevices((prevState: Device[]) => {
          if (!isDuplicateDevice(prevState, device)) {
            //! HERE
            if (isRssiChanged(prevState, device)) {
              //? remove the old device with the old rssi value
              const filteredPrevState = prevState.filter(oldDevice => oldDevice.id !== device.id);
              console.log('🚀 ~ setAllDevices ~ filteredPrevState:', filteredPrevState);

              //? put the new device with the new rssi value and re-render the FlashList item where rssi value has changed
              return [...filteredPrevState, device];
            }

            return [...prevState, device];
          }
          return prevState;
        });
      }
    });
  };

  return {
    scanForPeripherals,
    requestPermissions,
    allDevices,
    setAllDevices,
  };
}

export default useBLE;