How to be sure useLoaderData is called with fresh data?

[SylvainFaure]

Hi react-router community!

I started using the React Router v6 with an app bootstrapped with create-react-app a few month ago and I find it very nice and complete!
However, dealing with a dashboard with many interactions and data updates I found some issues and I am not sure if I am using it the right way.

In particular I have a page where I cannot make it work with the flow I use, and I cannot reproduce it as a bug so I guess I am making something wrong.

The flow I use is:

• in my page there are various form (I'm not using the component provided by react-router but a normal form)
• on submit I trigger the useSubmit hook which calls my router action
• on the action I dispatch a patch or post call
• the associated loader is triggered
• in my loader I have several promises which are resolved
• when I log the results at this point in my loader all my data is updated
• my page is not re-rendered with fresh data (normally provided by useLoaderData)

The behavior is not consistent, sometimes it seems to work normally, but after one or two updates I have the same problem.

Simplified code of my loader:

async ({params}) => {
    let rooms = []
    let participants = []
    const bearer = localStorage.getItem('bearer')
    const headers = {
      'Content-Type': 'application/json', 
      'Authorization': `Bearer ${bearer}`,
    }
    const [roomsRequest, participantsRequest] = await Promise.all([
      fetch(`/api/${params.id}/rooms/`, { headers }),
      fetch(`/api/${params.id}/participants/`, { headers }),
    ])
    const [roomsResponse, participantsResponse] = await Promise.all([
      roomsRequest.json(),
      participantsRequest.json()
    ])
    if (roomsResponse && roomsResponse.results) {
      rooms = roomsResponse.results
    }
    if (participantsResponse && participantsResponse.results) {
      participants = participantsResponse.results
    }
    return {
      rooms,
      participants
    }
}

I consume the results with useLoaderData like this:

  const { rooms, participants } = useLoaderData()

My question would simply be: what would cause my page not to be updated with fresh loader data while the loader is effectively triggered?

I am kind of lost on this one so any help would be precious,
Thank you,
Sylvain