useEffect 与 recyclerlistview (React Native) 和穷举-deps

Question

I am using a useEffect to fetch data on component render and set it to React Native RecyclerView as a data provider. I then set the state locally by appending to the existing dataProviderState. The problem is when I add the state as a dependency to the array the performance is terrible, as now the useEffect is called every time the list changes, so whenever the list is scrolled. How can I rewrite this hook to make this more performant while also following the exhaustive deps rule?

  const dataProvider = new DataProvider((r1, r2) => r1 !== r2);

  const rows = dataProvider.cloneWithRows([]);

  const [dataProviderState, setDataProviderState] = useState(rows);

  useEffect(() => {
    const handleFetchContacts = async () => {
      try {
        const fetchedContacts = await fetchContacts();
        setContacts(fetchedContacts);
        setDataProviderState(dataProviderState.cloneWithRows(fetchedContacts));
      } catch (error) {
        logger.error(error);
      }
    };

    const requestPermissionAndFetchContacts = async () => {
      try {
        const permission = await requestPermissionToContacts();
        setPermissions({contacts: permission});

        if (permission) {
          handleFetchContacts();
        }
      } catch (err) {
        logger.error(err);
        setTimeout(() => requestPermissionAndFetchContacts(), 2000);
      }
    };
    requestPermissionAndFetchContacts();
  }, [handleFetchContacts]);

^adding dataProviderState to the dependency array here makes the list slow

Answer 1

I was able to fix this by referencing the previous state in the callback, so exhaustive-deps stopped complaining about me referencing the state value directly inside the component, but not having it in the array:

setDataProviderState(state => state.cloneWithRows(fetchedContacts));