Forem: Gakii

React Router: Navigating Between Pages in Single-Page Applications

Gakii — Sat, 09 Mar 2024 10:25:10 +0000

A Single-Page Application (SPA), is a web application that operates within a single HTML page. It dynamically updates its content without requiring a full page reload. This is achieved by loading the initial HTML, CSS, and JavaScript resources and then dynamically fetching data and updating the DOM as users interact with the application. By loading and updating only the necessary data, it provides a fluid and more responsive user experience.

React Router is a JavaScript library used in React applications to handle routing and navigation. It provides a declarative way to define the routes of an application and render different components based on the current URL.

React Router allows developers to create a seamless, client-side navigation experience within a Single-Page Application by mapping URLs to specific components and managing the history and URL changes.

First thing to do is create a Browser Router and configure our first route. This will enable client side routing for our web app.

createBrowserRouter is the recommended router for all React Router web projects. It uses the DOM History API to update the URL and manage the history stack. It also enables the v6.4 data APIs like loaders, actions, fetchers and more.

Basic Router

To start, create and render the browser router in the entry point file of your Application, App.js in our case. We import createBrowserRouter and RouterProvider from react-router-dom, and set it equal to a variable, in our case router.

Const router = createBrowserRouter([

])

In the createBrowserRouter we pass in an array of route
objects.

In the code example below we have a router with two pages. The home page that displays the home page element, and an about page that displays the about page element. This allows you to navigate between the home page and the about page.

App.jsx


import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <h2>home page</>,
  },
  {
    path: '/about',
    element: (
      <div>
        <h2>about page</h2>
      </div>
    ),
  },
]);


const App = () => {
  return <RouterProvider router = {router} />;
};
export default App;

To render the router in our Application, we return the RouterProvider component. The component has a router prop where we pass in our router variable.

Nested Routes

The first route is often called the root route because the rest of the routes will render inside of it. It serves as the root layout of the user interface.

In the code example below we want the <Landing>, <Newsletter> and <About> components to render inside the <HomeLayout> which is set as the root route's component. We achieve this by making the routes, children of the root route.

We also need to set up which page will be the index page. This is the page that will be displayed when you move to the home page, and is going to match the root route URL.

In the code example below the <Landing> component is set as the index page.

App.jsx


import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <HomeLayout />,
    children: [
      {
        index: true,
        element: <Landing />,
      },
      {
        path: 'newsletter',
        element: <Newsletter />,
      },
      {
        path: 'about',
        element: <About />,
      },
    ],
  },
]);

const App = () => {
  return <RouterProvider router = {router} />;
};
export default App;

We then need to tell the root route where to render its child routes. Inside the root component, we import and render <Outlet>

The layout on the root component is then shared across all the children nested inside it. If we have a navbar component as illustrated below, all the nested children will share this navbar component.

HomeLayout.jsx

import { Outlet } from 'react-router-dom';
import Navbar from '../components/Navbar';
const HomeLayout = () => {
  return (
    <>
      <Navbar />
      <section>
        <Outlet />
      </section>
    </>
  );
};
export default HomeLayout;

It is recommended that all web projects use createBrowserRouter as it uses the full URL instead of the hash urls common in web apps before history.pushState was standardized. Full URLs are better for SEO, better for server rendering, and are just more compatible with the rest of the web platform.

While your app may only use a single router, several routers are available depending on the environment your app is running in. Picking a Router should help you figure out which one to use.

Thank you for following along with me in this learning process. Follow me and leave comments, added observations or questions below.

Functional State Update in React.

Gakii — Wed, 13 Sep 2023 09:44:25 +0000

State updates in React are asynchronous which means that the state does not necessarily update instantly.

This is by design to improve the performance of React applications. As of React 18, React now batches state updates even if they were inside an event handler or a promise callback.

When you update the state in React, this will require re-rendering of your component (and potentially other components), which could be an expensive operation.

This is why React batches several state updates together and combines them into one re-rendering in order to make your app more responsive and reduce the amount of work the browser has to do.

Let us look at an example:

import React, {useState} from "react";

 function App() {    
    const [date, setDate] = useState(new Date());
    const [counter, setCounter] = useState(0);

    console.log("rendered"); // to visualise re-renders

    function handleButtonClick() {
        setDate(new Date());
        setCounter(counter + 1);
    }

    return <button onClick={handleButtonClick}>Click me</button>
}

There are two state updates when the button is clicked. However, the component will only re-render once.

This is because React batches (merges) these two state changes and performs them at the same time. This makes your app respond faster to user interactions.

Because state updates are asynchronous, there's a caveat that we have to be aware of. For the sake of simplicity, let's say that we have the following component:

import {useState} from "react";

function App() {
    const [counter, setCounter] = useState(0);

    function handleButtonClick() {
        setCounter(counter + 1);
        setCounter(counter + 1);
    }

    return <button onClick={handleButtonClick}>Click me {counter}</button>
}

After clicking the button once, the value of the counter will be 1 not 2.
The two state updates will be batched together, and starting with counter = 0, the first setCounter() call will set the counter to 0 + 1 = 1, but not immediately because it's asynchronous.

Then we have the following call setCounter(counter + 1), but the value of counter is still 0 because the component did not re-render yet.
So the second call will also set the state to 1.

Functional state updates

To solve this issue, React has the concept of functional state updates which is _when you pass a function to the state setter function. _

The function passed to setState receives the previous state as an argument that is used to compute the next state.
Here's an example:

setCounter((previousCounter) => {
    return previousCounter + 1;
});

You can use a shorter version of course:

setCounter(previousCounter => previousCounter + 1);

We give it a function definition that takes the previous value of the state and returns the new state. In this example, the new state is the previous one + 1.

Here's how you can fix the above example to add to the state twice:

import {useState} from "react";

function App() {
    const [counter, setCounter] = useState(0);

    function handleButtonClick() {
        setCounter(prevCounter => prevCounter + 1);
        setCounter(prevCounter => prevCounter + 1);
    }

    return <button onClick={handleButtonClick}>Click me {counter}</button>
}

This will add 2 to the counter every time the button is clicked.
prevCounter => prevCounter + 1 is a function definition.
React will call this function and pass the previous value of the state as the first argument.

This means that you can name that argument whatever you choose. In this example, we used prevCounter.

Whenever the new state is computed using the previous state, it is recommended that you use functional state updates to guarantee consistency and prevent unexpected bugs.

If for example you are incrementing a counter, you should use a functional state update. On the other hand, if you're resetting a counter back to 0, you don't necessarily have to use a functional state update (as the new value is not computed using the previous state).

I hope this post was helpful. Please share and leave a comment if anything resonates with you.