https://github.com/ohansemmanuel/react_suspense_concurrent_app
render-as-you-fetch example application
https://github.com/ohansemmanuel/react_suspense_concurrent_app
Last synced: about 1 month ago
JSON representation
render-as-you-fetch example application
- Host: GitHub
- URL: https://github.com/ohansemmanuel/react_suspense_concurrent_app
- Owner: ohansemmanuel
- Created: 2020-08-16T08:52:25.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-09-28T13:01:43.000Z (over 4 years ago)
- Last Synced: 2025-03-14T22:52:28.756Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 396 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Render as you fetch
Render-as-you-fetch simply refers to not blocking the UI rendering while fetching data. In traditional approaches, we did this:
1. Start fetching data
2. Finish fetching data
3. Start rendering UI
With suspense we can do the following:
1. Start fetching
2. **Start rendering**
3. **Finish fetching**
Essentially, you start rendering pretty much immediately after kicking off the network request.
[See docs](https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense)
## Goal
The goal here is to take a sample project and implement the render as you fetch pattern. Sounds simple? Don't get cocky yet, huh? 😉
Read on!
## Running the starter application
1️⃣ **Clone the repository**
```bash
git clone https://github.com/ohansemmanuel/react_suspense_concurrent_app.git
```
2️⃣ **Install dependencies**
```bash
npx yarn
```
3️⃣ **Start the app**
```bash
npx yarn start
```
Point your browser to `http://localhost:3000/`. You should see the following:
4️⃣ **View the UI components**
To make the challenge focused on logic, UI components have been built for you. To view them, run:
```bash
npx yarn start:dev
```
Point your browser to `http://localhost:6060/`. You should have a React [Styleguidist](https://react-styleguidist.js.org/) server running. Inspect the components and live editable code.
## App requirement
You will make an API call to fetch a list of users, then fetch their profile details and have these all rendered.
See the full requirement below:
Your UI should start with a bare card (or UI section) to hold the result of the initial data fetch i.e the user names. Use the `Card` component provided.
While waiting for the fetched result, have a loading indicator displayed:
Once the API request is successful, you'll get a list of user names and their IDs. Render the user names.
Immediately after getting the list of user names, begin fetching their corresponding user details (different API requests). The initial network request was a single one. This includes multiple requests for each user.
While fetching the user details, make sure clicking a user name works, while also rendering a loading indicator.
Make sure the user details requests are parallelized i.e isn't waiting for the other to be completed first
Make sure the UI is incrementally updated for each user detail request
Here's what a working solution looks like:
## Chief Requirement
Arguably the most important requirement here is to make sure **start rendering immediately after kicking off the network request**. You know you're on the wrong path if you do this:
```jsx
// fetchDetails is fired after initial render :(
useEffect(() => fetchDetails(), []);
```
You'd want to use a suspense library for this one. e.g. Recoil or Relay.
## API requests/Server details
See the `/api` directory for api query functions `getUserNames` and `getUserDetails`. These point to the `/users` and `/users/${userId}` respectively.
For this to work, you need to run the accompanying [server](https://github.com/ohansemmanuel/react_suspense_concurrent_app_server) to which these requests are proxied.
Clone the repo:
```bash
git clone https://github.com/ohansemmanuel/react_suspense_concurrent_app_server.git
```
Install dependencies:
```bash
npx yarn
```
and start the server:
```bash
npx yarn start
```
visit http://localhost:3001/
## Endpoints
| route | resource |
| ------------- | :---------------------------: |
| / | default user details |
| /users | list of user names (with IDs) |
| /users/\${id} | specific user details |
## Challenge Solution
- See branch 'recoil' for recoil solution