I am trying to render a list of items in React Native with the FlatList component but every time I fetch new data it re-renders the who list of items even with React.memo.
Here is what my code looks like:
const data = [
{ _id: 1, text: 'Hello World' },
{ _id: 2, text: 'Hello' },
{ ... }
]
const renderItem = ({ item }) => (<Component item={item} />)
const loadMore = () => {
//Fetching data from db and adding to data array
}
<FlatList
data={data}
keyExtractor={item => item._id}
renderItem={renderItem}
onEndReached={loadMore}
removeClippedSubviews={true}
/>
Component.js
const Component = ({ item }) => {
console.log('I am rendering')
return (
<Text>{item.text}</Text>
)
}
const equal = (prev, next) => {
return prev.item.text === next.item.text
}
export default React.memo(Component, equal)
Every time the onEndReached function gets triggered and calls the loadMore function, all FlatList items get re-rendered, it console.log 'I am rendering' every single time and causes the error virtualizedlist you have a large list that is slow to update
Thanks to anyone who can help me!
I don't know why but I fixed it with an if statement in the equal function
//Changing this
const equal = (prev, next) => {
return prev.item.text === next.item.text
}
//To this
const equal = (prev, next) => {
if(prev.item.text !== next.item.text) {
return false;
}
return true
}
Hope this could help someone else.
Related
I'm trying to get dynamic next page with Object.entries[currentTaskIndex], everything works great and i'm getting the task data based on their indexes , but useEffects not rendering UI when dependency changes, actually it's rendering same task as before ,so this mean when useState fire, currentTaskIndex state changes to 2 but it's stillshowing index 1 items, but when i refresh the page it's showing index 2 items,so the question is that, how can i show index 2 items while useEffects fire?
This is what i have:
const [isCorrect, setIsCorrect] = useState(false);
const [currentTaskIndex, setCurrentTaskIndex] = useState(0);
useEffect(() => {
const checkIfCorrect = newData.map((data) => {
....
});
}, [!isCorrect ? newItems : !newItems]);
// Filtered task
useEffect(() => {
const filterObject = newData.filter((data) => {
return data.map((dataItems) => {
return dataItems.map((tasks, i) => {
return Object.entries(tasks)[currentTaskIndex].map((task, i) => {
setFilteredTasks(task);
});
});
});
});
}, [newData]);
useEffect(() => {
isCorrect && setCurrentTaskIndex((prev) => prev + 1);
setNewItems([]);
setIsCorrect(false);
const filterObject = newData.filter((data) => {
return data.map((dataItems) => {
return dataItems.map((tasks, i) => {
return Object.entries(tasks)[currentTaskIndex].map((task, i) => {
setFilteredTasks((currTask) => [...currTask, task]);
});
});
});
});
}, [isCorrect]);
{filteredTasks.map((taskItems, i) => (
<View key={i}>
{taskItems.en?.map((enItems, i) => (
.....
))}
</View>
React components automatically re-render whenever there is a change in their state or props. A simple update of the state, from anywhere in the code, causes all the User Interface (UI) elements to be re-rendered automatically.
So, by adding just currentTaskIndex on dependency array your useEffect also re-render.
when you just put newData on dependency array its could not update UI because newData is not a state or Props.
Yes this is your solution:
// Filtered task
useEffect(() => {
const filterObject = newData.filter((data) => {
return data.map((dataItems) => {
return dataItems.map((tasks, i) => {
return Object.entries(tasks)[currentTaskIndex].map((task, i) => {
setFilteredTasks(task);
});
});
});
});
}, [newData, currentTaskIndex]); <------
An finally fixed!
by just adding CurrentTaskIndex as dependency to Filtered task useEffects
// Filtered task
useEffect(() => {
const filterObject = newData.filter((data) => {
return data.map((dataItems) => {
return dataItems.map((tasks, i) => {
return Object.entries(tasks)[currentTaskIndex].map((task, i) => {
setFilteredTasks(task);
});
});
});
});
}, [newData, currentTaskIndex]); <------
I have two screens. Approve List and Approve Detail. When data approved in Approve Detail, page navigate to Approve List. Then approved data should disapear from FLatList. How to remove FlatList item when data approved? or how to re render FlatList when data change? Here is my code:
Approve List:
const Approve = ({ navigation }) => {
const [rekomendasi, setRekomendasi] = useState({})
// other code
const getRekomendasi = async (token, bagian) => {
try {
const response = await sippApi.get(`/penjaminan?bagian=${bagian}`, {
headers: {
Auth: token
}
});
setRekomendasi(response.data.data)
console.log(rekomendasi)
} catch (error) {
console.log(error)
}
}
useEffect(() => {
getToken();
getUserData()
getRekomendasi(token, userData.bagian);
}, [setToken, setUserData, rekomendasi]); // if I pass rekomendasi here, make infinite loop on api request
return (
<FlatList
onRefresh={() => onRefresh()}
refreshing={isFetching}
removeClippedSubviews
style={{ marginTop: 2 }}
data={rekomendasi}
keyExtractor={rekom => rekom.penjaminan.nomor_rekomendasi}
renderItem={({ item }) => {
return (
<TouchableOpacity onPress={() => navigation.navigate("ApproveDetail", { id: item.penjaminan.nomor_rekomendasi, bagian: userData.bagian })}>
<ApproveList
plafond={item.value}
kantor={item.nama_kantor}
nomor_rekomendasi={item.nomor_rekomendasi}
produk={item.skim}
/>
</TouchableOpacity>
)
}}
showsHorizontalScrollIndicator={false}
/>
)
}
If I pass value on second argument on UseEffect, it cause infinite loop on API request. If not, my FlatList cant re render when data change. What should I do?
Thanks for help
You have to remove the rekomendasi dependency in the useEffect to avoid infinite loop, it's only for init data :)
What is the purpose of onRefresh function in the FlatList ? Instead you could put the getRekomendasi function to trigger a new call and your data will be updated
try to separate the functions to two useEffects
useEffect(() => {
//<-- write your getToken() and getUserDate() here
getToken();
getUserData()
}, []);
useEffect(() => {
const getRekomendasi = async (token, bagian) => {
try {
const response = await sippApi.get(`/penjaminan?bagian=${bagian}`, {
headers: {
Auth: token
}
});
setRekomendasi(response.data.data)
console.log(rekomendasi)
} catch (error) {
console.log(error)
}
}
getRekomendasi(token, userData.bagian);
},[token,userData.bagian]);
Problem solved by using useFocusEffect
useFocusEffect(
React.useCallback(() => {
getRekomendasi(token, userData.bagian)
}, [token, userData.bagian])
);
Here you can see the gif
Here is my whole Navigator functional component. I'm trying to implement two tabs using Tab Navigator. One to display the cryptos and the other to display the forex data.
The problem is, when I try to load more data on reaching the flatlist's end, the flatlist is scrolling to the top since I'm making a state change [page+1].
const Navigator = () => {
const Tab = createMaterialTopTabNavigator();
const renderItems = ({ item }) => (
<Text>{item.name}<Text>
);
const fetchMarketData = async () => {
console.log("Fetching");
const marketData = await getCryptoMarketData({ page });
if (marketData != "Network Error") {
const ids = data.map((item) => item.id);
let newData = marketData.filter((item) => !ids.includes(item.id));
setData([...data, ...newData]);
setFetching(false);
} else {
setFetching(false);
Alert.alert(marketData, "Sorry for the inconvenience");
}
};
useEffect(() => {
setFetching(true);
const data = async () => {
await fetchMarketData();
};
}, [page]);
const handleLoadMore = async () => {
setFetching(true);
setPage((page) => page + 1);
};
const ScreenA = () => (
<FlatList
data={data}
style={{ backgroundColor: "white" }}
keyExtractor={(item) => item.id}
renderItem={renderItems}
scrollEventThrottle={16}
onEndReached={handleLoadMore}
onEndReachedThreshold={0}
/>
);
return (
<Tab.Navigator
screenOptions={({ route }) => screenOptions(route)}
keyboardDismissMode="auto"
>
<Tab.Screen name="Crypto" component={ScreenA} />
<Tab.Screen name="Forex" component={ScreenC} />
</Tab.Navigator>
);
};
export default Navigator;
OnEndReached is firing the handleLoadMore function and after the state change on data, the Flatlist is scrolling to the top.
1st reason
you have typo in "fetchMarketData", how exactly u get "newData" because i cant see it anywhere, maybe it should be "marketData" if not then u adding SAME old data PLUS undefined[...data, ...undefined]
2nd reason
reason why is that u call setPage(page + 1) and then "fetchMarketData" this is bad why ? because setState is async and it can be changed instant or after 5 secound, so u dont know when its changed and this is why we have hooks, you can use "useEffect" to handle this
change your "handleLoadMore" for example like this
const handleLoadMore = () => {
setPage(page + 1);
};
add useEffect hook that runs when "page" state changes
React.useEffect(() => {
(async() => {
setFetching(true)
const marketData = await getCryptoMarketData({ page });
if (marketData != "Network Error") {
setData([...data, ...marketData]);
} else {
Alert.alert(marketData, "Sorry for the inconvenience");
}
setFetching(false)
})()
}, [page])
Sometghing really basic but I didn't understant.
Once I get the contacts how can I use them to populate the Flatlist?
I always get Can't find variable: contacts
import * as Contacts from "expo-contacts";
const ContactsScreen = props => {
useEffect(() => {
(async () => {
const { status } = await Contacts.requestPermissionsAsync();
if (status === "granted") {
const { data } = await Contacts.getContactsAsync({
fields: [Contacts.Fields.Emails]
});
if (data.length > 0) {
const contact = data[0];
console.log(contact);
}
}
})();
}, []);
return (
<View >
<Text>Contacts Module</Text>
<FlatList
data={contact}
keyExtractor={contact.id}
renderItem={({ item }) => (
<ContactItem
firstName={item.firstName}
/>
</View>
);
};
export default ContactsScreen;
I think it's really simple, I just don't understand
You need to keep your contacts in the component's state. So every time you change your state, your component will render itself and you will see the updated data.
Change your code with the following. Don't forget to import useState.
import * as Contacts from "expo-contacts";
const ContactsScreen = props => {
const [myContacts, setMyContacts] = useState([]);
useEffect(() => {
(async () => {
const { status } = await Contacts.requestPermissionsAsync();
if (status === "granted") {
const { data } = await Contacts.getContactsAsync({
fields: [Contacts.Fields.Emails]
});
if (data.length > 0) {
setMyContacts(data);
}
}
})();
}, []);
return (
<View >
<Text>Contacts Module</Text>
<FlatList
data={myContacts}
keyExtractor={item => item.id}
renderItem={({ item }) => (
<Text>{item.firstName}</Text>
)}
/>
</View>
);
};
export default ContactsScreen;
Answer from my comment:
I think that might be because of the scope of the variable , it could be that RN doenst know it exists because it only lives inside the function. I guess you could set up a State and then assign the values from contact to the state and in ur flatlist call data ={ this.state.contact}.
or by using hooks like you do :
if (data.length > 0) {
setContact(data);
}
and call it in flatlist:
data={myContact} // if named so in state declaration
I'm having issue with my componentDidUpdate always updating the render()/state.
My state by default has applicantsData
this.state = {
applicantsData: []
};
ComponentDidMount and ComponentDidUpdate call my method that loads data for the state
componentDidMount() {
this.getApplicants();
}
componentDidUpdate(prevProps) {
// needs to be a unique value
if (prevProps.applicantsData !== this.props.applicantsData) {
this.getApplicants();
}
}
getApplicants = async () => {
AsyncStorage.getItem('CurrentPropertyID')
.then((value) => {
const propID = JSON.parse(value);
this.props.getApplicants(propID);
this.setState({ applicantsData: this.props.applicantsData });
});
}
Then, I have a search box and a FlatList to create my component. I'm using react-native-search-box' for the search box
<Search
ref="search_box"
onSearch={this.onSearch}
onChangeText={this.onChangeText}
/>
<FlatList
extraData={this.state}
data={this.state.applicantsData}
keyExtractor={(item) => {
return item.id.toString();
}}
renderItem={this.renderItem}
/>
My onChangeText method:
onChangeText = (searchText) => {
return new Promise((resolve) => {
let data = this.props.applicantsData;
if (searchText !== '') {
data = data.filter((item) =>
item.name.toUpperCase().includes(searchText.toUpperCase()) ||
item.Email.toUpperCase().includes(searchText.toUpperCase()) ||
item.Phone.toUpperCase().includes(searchText.toUpperCase())
).map(({ id, name, dtEntered, approve, Email, Phone, image }) =>
({ id, name, dtEntered, approve, Email, Phone, image }));
this.setState({ applicantsData: data });
} else {
this.setState({ applicantsData: this.props.applicantsData });
}
resolve();
});
}
Everything is working fine. The data is loaded and displayed in the screen. However, the componentDidUpdate is called all the name and keep updating the props, so when I use the search box to filter my state.applicantsData, it is quickly filtered, then all the data is loaded again because the this.getApplicants was called inside the componentDidUpdate().
Does it make sense? How can I fix this issue?
Thanks
This part is the problem.
componentDidUpdate(prevProps) {
// needs to be a unique value
if (prevProps.applicantsData !== this.props.applicantsData) {
this.getApplicants();
}
}
You have to use deep compare method to compare applicantsData.
You can use https://www.npmjs.com/package/deep-equal or isEqual from lodash