Fetching data with React-Router 6.4

Fetching data with React-Router 6.4

Normal React data flow

Fetching data with React-Router 6.4

Normal React data flow

1. Go to /page

Fetching data with React-Router 6.4

Normal React data flow

1. Go to /page

2. Render component + display skeletons

Fetching data with React-Router 6.4

Normal React data flow

1. Go to /page

2. Render component + display skeletons

3. Trigger useEffect + fetch data

Fetching data with React-Router 6.4

Normal React data flow

1. Go to /page

2. Render component + display skeletons

3. Trigger useEffect + fetch data

4. Re-render component + display data

Fetching data with React-Router 6.4

Normal React data flow

1. Go to /page

2. Render component + display skeletons

3. Trigger useEffect + fetch data

4. Re-render component + display data

RR6.4 loaders data flow

Fetching data with React-Router 6.4

Normal React data flow

1. Go to /page

2. Render component + display skeletons

3. Trigger useEffect + fetch data

4. Re-render component + display data

RR6.4 loaders data flow

1. Go to /page

Fetching data with React-Router 6.4

Normal React data flow

1. Go to /page

2. Render component + display skeletons

3. Trigger useEffect + fetch data

4. Re-render component + display data

RR6.4 loaders data flow

1. Go to /page

2. Trigger loader + fetch data

Fetching data with React-Router 6.4

Normal React data flow

1. Go to /page

2. Render component + display skeletons

3. Trigger useEffect + fetch data

4. Re-render component + display data

RR6.4 loaders data flow

1. Go to /page

2. Trigger loader + fetch data

3. Render component + display data

https://local.fulll.ninja/2/validation

(utilisateur non connecté)

(utilisateur connecté)

https://local.fulll.ninja/2/validation

(Render du RootContainer)

https://local.fulll.ninja/2/validation

(Render du CompanyIdContainer)

https://local.fulll.ninja/2/validation

(Render du ValidationDemandesContainer)

https://local.fulll.ninja/2/validation