ReactJS: Empty component's old fetched data before fetching again - reactjs

Question

I am fetching remote data from my React component. When data is ready, child components are rendered. While data is loading, the 'Data is loading ....' text is displayed.
When the component is rendered for the second time due to the props change, I set the previous data to null in order to show that new data is loading.
const List = (props) => {
const [items, setItems] = useState(null);
useEffect(() => {
setItems(null);
fetch(`http://some_url_to_fetch_items.com?PAGE=${props.page}`)
.then((data) => {
setItems(data);
})
}, [props.page]);
if (!items) {
return "Data is loading ......."
}
return (
<ul>
{items.map(item => (
<li>{item}</li>
))}
</ul>
)
}
The problem of this approach is that when the component is rendered for the second time the setItems(null); code is not executed immediately (probably because useEffect is executed asynchronously) and the component re-renderes 3 times instead of expected 2:
1-st re-render because of the props change (BUT with old data, since setItems(null) is executed too late)
2-nd re-render after setItems(null) is finally executed
3-rd re-render after data is fetched
I understand what the problem with my approach is. But I don't see another way.
It is mandatory to use hooks.
Any ideas?

Answer 1

A quick fix would be to add a key prop to your List:
<List key={page} page={page} />
When the value for page changes, the List component will be unmounted, and a new one rendered. The new one will not have any previous data in it, so you will only get 2 renders instead of 3.
This means you don't have to set previous data to null anymore.
If you do this, you'll need to check that the component is still mounted in your useEffect before calling setItems, otherwise you'll be trying to set state on an unmounted component. You can write:
if(setItems) {
setItems(data)
}
Changing the key prop is a bit hacky though, so I would investigate other ways to solve your issue.
Maybe you should pass the data into the list instead of the list being responsible for fetching data, and have the page state and data both inside the parent component?
For now though, changing the key using the page should work.

Answer 2

use this method :
useEffect(() => {
fetch(`http://some_url_to_fetch_items.com?PAGE=${props.page}`)
.then((data) => {
setItems(data);
})
}, []);
return (
<ul>
{items? items.map(item => (
<li key={item.id}>{item}</li>
)):"Data is Loading..."}
</ul>
)