Блог

Итак, у нас есть плоский список с примерно 200/300 кнопками, этим кнопкам передается функция, которая показывает рекламу после 5 кликов. Итак, мы использовали useState для подсчета кликов.

Но .. поскольку мы обновляем счетчик внутри функции, он снова вызывает себя и повторно отправляет все элементы / кнопки flatlist и вызывает задержку / задержку.

«Что вы имеете в виду под задержкой?»Например, обычно вы можете отправлять спам, нажимая кнопку, и все в порядке, но когда setCount(prev => prev 1) он раскомментирован, он просто медленно зависает и отстает

Код:

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

const data = ['IMAGINE 200 items here.']

const test = () => {
    const [count, setCount] = useState(0);

    const TestFunction = useCallback(async () => {
        setCount(prev => prev   1);

        if (count === 5) {
            /*for example show a add*/
            showAd();
        }
    }, [count]);


    return (
        <View>
            <FlatList data={data} renderItem={() => React.useMemo(<TouchableOpacity onPress={TestFunction}>
                <Text>Test</Text>
            </TouchableOpacity>)}>

            </FlatList>
        </View>
    );
};


const showAd = () => {
    /*for example show a add*/
};

  

Я считаю, что вам следует разделить тестовую функцию на две части

 const addClick = useCallback(() => { setCount(prev => prev   1) }, []) 
// this doesn't need count dependency
  

и

 const showAdOnCountThreshold = useEffect(() => { if (count === 5) showAd() }, [count] 
// this gets called after updating the count
  

Кроме того, ваш React.memo ничего не делает, потому что у него нет набора зависимостей. Но теперь, когда у вас есть addClick which никогда не меняется, у сенсорных объектов нет причин для изменения (что касается изменений prop).

Итак, вы можете сделать:

 const renderClickCountButton = React.useCallback(() => (
 <TouchableOpacity onPress={addClick}>...</TouchableOpacity>
), [addClick])
  

и затем

 <FlatList renderItem={renderClickCountButton}