1. Lazy Component Optimization

Whenever a react app is loaded, all the components are loaded along with it increasing the client-side rendering load.

This is a problem because when the client has a slow ping rate and if the client wants only a specific type of information, they have to wait for all the components to render which is the waste of their time. This is why we use lazy component optimization.

Lazy Components are optimized components that render when only required. If the user loads the landing page, only the components required for the landing page are loaded. Other components like Dashboard, Profile, etc., are not loaded until the user navigates to them.

Consider this example where we have these two different components.

export default function Dashboard() {
    return(
        <div>
            <h1>Dashboard</h1>
        </div>
    )
}

export default function Landing() {
    return(
        <div>
            <h1>Landing</h1>
            
        </div>
    )
}

To lazy load these components, I have to simply use a small syntactic sugar while importing them.

import React, { Suspense, lazy } from 'react';
const Dashboard = lazy(() => import('./components/Dashboard'));
const Landing = lazy(() => import('./components/Landing'));

2. Routing and useNavigate

2.1 <BrowserRouter> and <Route> :

React provides a native way to perform client-side rendering with programmatic navigation using r**eact-router-DOM.**

It allows single-page React application to render different components based on URL path with reloading the entire page, which is achieved by using <BrowserRouter> to enable routing and <Route> to define the path to the component.

Let’s understand this using an example.

import React, { Suspense } from 'react';
import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom'

function App() {
  return (
    <>
      <Navbar />
      <BrowserRouter>
      <Navigatebuttons />
        <Routes>
          <Route path='/dashboard' element={<Suspense fallback={"Loading"}><Dashboard /></Suspense>} />
          <Route path='/' element={<Suspense fallback={"Loading"}><Landing /></Suspense>} />
        </Routes>
      </BrowserRouter>
    </>
  )
}

Here, I have created a structure as follows:

function App() {
	return(
		<BrowserRouter>
			<Routes>
				<Route path= '/path1' element={<Element1>} />
				<Route path= '/path2' element={<Element2>} />
			</Routes>
		<BrowserRouter/>
	)
}

If you noticed, I have added, <Suspense> which essentially handles lazy loading. As Lazy loading renders components in real-time, components may cause delay based on their complexity. Till the time they load, it doesn’t look good for the UI to be blank which is why we add a suspense to show a buffer component that informs the user that their request is being processed.

2.2 useNavigate() hook

The useNavigate() hook from react-router that lets you navigate to different routes. It returns a navigate() function in this code that does the following. It’s actually pretty self-explanatory, just look at the code below.