So I have a React Native Flatlist. Then I have a useState which fires when I click on a item in my flatlist. The problem I am facing to right now is that if I click on a item and the useState() fires every item is going to rerender. This is bad because it makes the app extremly slow.
Is there any way to set my State without the FlatList gets rerendered but another view appears (because of the useState())??
My code looks like this:
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>
)
}
In this example the data list is very small. If it get's bigger you really can see a difference
Here are things to consider to make sure that the FlatList won't re-render on state change (see code below):
data being passed is stored or memoized somehow.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>
)
}
Here's an idea with memo and separate components:
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>
)
}
and then:
const MyFlatList = React.memo(({setX}) => {
return (
<FlatList
data = {
["-",
"--",
"---",
"----",
"-----",
"------",
"-------",
"--------",
"---------"]
}
renderItem={({item}) => {(
<View>
<TouchableOpacity onPress={() => setX(true)}>
<Text style={{padding: 10,}}>{item}</Text>
</TouchableOpacity>
</View>
)}}
/>
);
});
crawler's answer is very good with recommendations of memoizing the data and the callback, as well.