如何避免React Native组件因状态变更频繁重渲染

你的核心问题是：isNearby一旦变为true后，每当distance变化时仍然会触发setIsNearby(true)——哪怕状态值根本没改变，这直接导致组件重复渲染，进而让logA()反复执行。

根源在于当前的useIsNearby逻辑里，只要distance满足条件就无条件调用setIsNearby(true)，完全没考虑当前isNearby已经是true的情况。虽然React对相同状态值的更新有优化，但频繁触发setState仍会引发不必要的组件重渲染，尤其当distance频繁更新时问题更明显。

修改useIsNearby的逻辑，只有当isNearby当前为false且满足距离条件时，才更新状态。同时修复第一个useEffect的依赖漏洞，确保位置变化能同步到coordinate：

import { useEffect, useState } from 'react';
import useDistanceTo from './useDistanceTo';
import { Coordinates } from '../screens/backend/Distance';

const useIsNearby = (locationCoordinate) => {
  const [coordinate, setCoordinate] = useState<Coordinates>(null);
  const [isNearby, setIsNearby] = useState<boolean>(false);
  const distance = useDistanceTo(coordinate);

  useEffect(() => {
    setCoordinate(locationCoordinate);
  }, [locationCoordinate]); // 依赖整个locationCoordinate，避免遗漏经度变化

  useEffect(() => {
    // 仅当未处于附近状态，且距离符合要求时才更新
    if (!isNearby && distance !== undefined && distance !== -1 && distance < 50) {
      setIsNearby(true);
    }
  }, [distance, isNearby]); // 加入isNearby作为依赖，保证判断逻辑准确

  return isNearby;
};

export default useIsNearby;

关键改动说明 #

• 新增状态判断：通过!isNearby限制状态更新时机，确保只有从false切换到true时才执行setIsNearby，彻底杜绝无意义的状态更新。
• 修复依赖数组：把第一个useEffect的依赖从locationCoordinate.latitude改为整个locationCoordinate，避免经度变化时coordinate无法同步更新的问题。
• 优化距离判断逻辑：将(distance || distance === 0)替换为distance !== undefined，逻辑更清晰，同时覆盖distance为0的合法场景。

如果修改后组件仍有不必要的重渲染，可以用React.memo包裹组件，确保只有当locationCoordinate或isNearby真正变化时才重新渲染：

import React from 'react';

// 用React.memo包裹组件，浅比较props变化
const Component = React.memo(({ locationCoordinate }) => {
  const isNearby = useIsNearby(locationCoordinate);

  const logA = () => {
    console.log('test');
    return null;
  };

  return (
    <View style={styles.container}>
      {isNearby ? logA() : <Text>Show B</Text>}
    </View>
  );
});

export default Component;

这样修改后，logA()只会在isNearby从false变为true时执行一次，后续即使distance变化，也不会再触发重复执行。

内容的提问来源于stack exchange，提问作者Flip