Así que tengo una lista plana de React Native . Luego tengo un estado de uso que se activa cuando hago clic en un elemento de mi lista plana. El problema al que me enfrento en este momento es que si hago clic en un elemento y useState() activa, todos los elementos se volverán a procesar. Esto es malo porque hace que la aplicación sea extremadamente lenta.
¿Hay alguna forma de establecer mi Estado sin que FlatList se vuelva a representar pero aparezca otra vista (debido a useState())?
Mi código se ve así:
import React, {useState} from "react" import {View, Flatlist, Text} from "react-native" export default const App = () => { const [x, setX] = useState(false) return( <View> <FlatList data = { ["-", "--", "---", "----", "-----", "------", "-------", "--------", "---------"] } renderItem={({item}) => {( <View> <TouchableOpacity onPress={() => setX(true)}> <Text style={{padding: 10,}}>{item}</Text> </TouchableOpacity> </View> )}} /> {x == true ? <Button title="It works" onPress={() => console.log("Everything is working")} /> : <View />} </View> ) }En este ejemplo, la lista de datos es muy pequeña. Si se hace más grande, realmente puedes ver la diferencia.
Aquí hay cosas a considerar para asegurarse de que FlatList no se vuelva a procesar en el cambio de estado (vea el código a continuación):
data que se pasan se almacenen o memoricen de alguna manera. import React, {useState} from "react" import {View, Flatlist, Text} from "react-native" export default const App = () => { // See 1. above const [data, setData] = useState([ "-", "--", "---", "----", "-----", "------", "-------", "--------", "---------", ]); const [x, setX] = useState(false) // See 2. above const renderItem = useCallback(({ item }) => ( <View> <TouchableOpacity onPress={() => setX(true)}> <Text style={{padding: 10,}}>{item}</Text> </TouchableOpacity> </View> ), []); return( <View> <FlatList data={data} renderItem={renderItem} /> {x == true ? <Button title="It works" onPress={() => console.log("Everything is working")} /> : <View />} </View> ) }Aquí hay una idea con memo y componentes separados:
const App = () => { const [x,setX] = useState(false); return ( <View> <MyFlatList setX={setX}/> {x == true ? <Button title="It works" onPress={() => console.log("Everything is working")} /> : <View />} </View> ) }y entonces:
const MyFlatList = React.memo(({setX}) => { return ( <FlatList data = { ["-", "--", "---", "----", "-----", "------", "-------", "--------", "---------"] } renderItem={({item}) => {( <View> <TouchableOpacity onPress={() => setX(true)}> <Text style={{padding: 10,}}>{item}</Text> </TouchableOpacity> </View> )}} /> ); });la respuesta del rastreador es muy buena con recomendaciones de memorizar los datos y la devolución de llamada también.