Why if statements not working as expected with RTK Query - reactjs

Question

I'm trying to build an app which pulls data from backend with RTK Query and display that data as posts. I have successfully created RTKQ endpoint that gets data from backend with useEffect. However I want to put data in another array so that I can add more data with infinite scroll to that array but I am not able to do that.
My code is as follow. All help will be highly appreciated.
import { Box, Stack, Skeleton } from "#mui/material";
import React, { useEffect, useState } from "react";
import Post from "../components/postComponent";
import { useGetSimplesMutation } from '../services/authApi'
const Feed = () => {
const [getSimples, { isLoading, isSuccess, data }] = useGetSimplesMutation()
const [loadNow, setLoadNow] = useState(false)
let simplesData = []
useEffect(() => {
const handleGetSimples = async () => {
try {
await getSimples(0).unwrap()
if (isSuccess & !loadNow) {
console.log("Simples loaded")
simplesData = [...simplesData, ...data]
setLoadNow(true)
console.log(simplesData)
}
} catch (error) {
console.error(error.message)
}
}
handleGetSimples()
}, [])
return (
<Box flex={6} p={{ xs: 0, md: 2 }}>
{isLoading && (
<Box marginLeft={3}>
<Stack spacing={1} >
<Skeleton variant="text" height={100} />
<Skeleton variant="text" height={20} />
<Skeleton variant="text" height={20} />
<Skeleton variant="rectangular" height={300} />
</Stack>
</Box>
)}
{(isSuccess && loadNow) && simplesData.map(simples => {
return (
<div key={simples._id}>
<Post
userName={simples.userName}
dateSubmitted={simples.dateSubmitted}
beforePic={simples.beforePic}
afterPic={simples.afterPic}
tag={simples.tag}
/>
</div>
)
})}
</Box>
);
};
export default Feed;
This Code works when I directly map data obtained from RTKQ. However when I pass data to another array in an If statement the code inside if statement does not trigger when isSuccess gets true alongwith loadNow which has default state of false. I want to add data to simplesData array when this condition is true and then setLoadNow to true so that I can render my posts.

Answer 1

The line let simplesData = [] will be re-executed every time that the component re-renders, which will wipe out whatever you have stored.
If you want to keep data across multiple renders then you need to store it in a useState hook.
const [simplesData, setSimplesData] = useState([])
Inside your useEffect, you can call setSimplesData, using a functional update to minimize the dependencies of your effect.
setSimplesData(prevData => [...prevData, ...data])
There are some other issues here, mainly your lack of useEffect dependendencies. I think you want something like this?
const Feed = () => {
const [getSimples, { isLoading, isSuccess }] = useGetSimplesMutation()
const [loadPage, setLoadPage] = useState(0)
const [simplesData, setSimplesData] = useState([])
const handleEndReached = () => {
setLoadPage(prevPage => prevPage + 1);
}
const handleReset = () => {
setSimplesData([]);
setLoadPage(0);
}
useEffect(() => {
const handleGetSimples = async () => {
try {
const pageData = await getSimples(loadPage).unwrap()
console.log(`Simples page ${loadPage} loaded`)
setSimplesData(prevData => [...prevData, ...pageData])
} catch (error) {
console.error(error.message)
}
}
handleGetSimples()
}, [loadPage]);