Fetch Data Before you Component Loads

In this lesson, we will explore the concept of fetching data before a component loads also known as pre-fetching. We will discuss the importance of pre-fetching, especially for large apps or slow internet connections, and how it can improve performance.

When using the useEffect hook in React, data fetching only occurs after the component has been mounted. This means that the component will render first before the data fetching process begins. This may not cause any noticeable performance issues for users with a decent internet connection or for small apps. However, for larger apps or users with slower internet connections, users may see a loading spinner for longer than they expect. Pre-fetching resolves this issue by fetching data before the component mounts, meaning the data could be ready before the component renders.

Example: Pokemon List App#

To demonstrate the pre-fetching process, let's consider a simple Pokemon List app that fetches data from the PokéAPI using the useEffect hook. The app displays the fetched data and allows users to view details for specific Pokemon.

Code Structure#

Before diving into the pre-fetching implementation, let's briefly examine the code structure of the app by starting with the package.json file.

xxxxxxxxxx

// package.json file

{

  "name": "poke-app",

  "private": true,

  "version": "0.0.0",

  "type": "module",

  "scripts": {

    "dev": "vite",

    "build": "vite build",

    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",

    "preview": "vite preview"

  },

  "dependencies": {

    "react": "^18.2.0",

    "react-dom": "^18.2.0"

  },

  "devDependencies": {

    "@types/react": "^18.2.43",

    "@types/react-dom": "^18.2.17",

    "@vitejs/plugin-react": "^4.2.1",

    "eslint": "^8.55.0",

    "eslint-plugin-react": "^7.33.2",

    "eslint-plugin-react-hooks": "^4.6.0",

    "eslint-plugin-react-refresh": "^0.4.5",

    "vite": "^5.0.8"

  }

}

In order to focus on data fetching the project does not contain any third party packages, just what is provided by default from Vite.

The source folder contains a Route and Link component for basic routing, as well as a Home and Details components for the homepage and details page. The homepage contains two console logs to help to see when the component loads and when the data loads.

xxxxxxxxxx

// Home.jsx

​

function Home() {

 const [pokemons, setPokemons] = useState(null);

​

 useEffect(() => {

   console.log("data loads"); // <- console log 1

   getPokemons().then(setPokemons);

 }, []);

​

 console.log("component loads"); // <- console log 2

 if (!pokemons) {

   return <div>Loading...</div>;

 }

​

 // remaining code...

}

These aren't necessary but help to illustrate the fact that with useEffect data loading happens after the component is mounted.

The API folder holds the logic for fetching Pokemon data which we won't go into detail here.

Strict Mode in React#

In the main.jsx file, the <App /> component is wrapped in a component called <React.StrictMode>.

xxxxxxxxxx

// main.jsx

// Module imports

​

ReactDOM.createRoot(document.getElementById('root')).render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

);