DEV Community: Emmanuel Oloke

GSP321: Develop your Google Cloud Network - Challenge Lab Solution.

Emmanuel Oloke — Thu, 03 Apr 2025 22:45:31 +0000

Cover Image Credit: NASSCOM Community

Introduction

In this article, I’ll take you through a step-by-step approach to solving one of the most challenging labs in the Google Cloud Associate Cloud Engineer Certification journey. The Develop your Google Cloud Network: Challenge Lab.

Providing the Google Cloud commands you need and giving detailed explanations of every aspect of each command.

At the end of this article, you’ll be able to confidently complete the lab and gain an in-depth understanding of Google Cloud networking, Creating and Configuring a Cloud SQL Instance, Cloud IAM & Admin management, and a bit of Kubernetes.

Overview of GSP321

The scenario presented in this challenge requires you as a trained Google Cloud and Kubernetes Engineer to help a new team (Griffin) set up their cloud environment.

The tasks you need to complete include;

Create a development VPC with three subnets manually.
Create a production VPC with three subnets manually.
Create a bastion that is connected to both VPCs.
Create a development Cloud SQL Instance and connect and prepare the WordPress environment.
Create a Kubernetes cluster in the development VPC for WordPress.
Prepare the Kubernetes cluster for the WordPress environment.
Create a WordPress deployment using the supplied configuration.
Enable monitoring of the cluster.
Provide access for an additional engineer.

There will be a set of specified Region and Zone for you to use in the challenge, but for the sake of this tutorial we will use REGION: us-central1 and ZONE: us-central1-a

Prerequisites

Basic knowledge of Google Cloud CLI, Google Cloud Console, Kubernetes, and Compute Engine.
Credits on Google Cloud Skills Boost
Active Qwiklabs subscription or Google Cloud free trial

Step-by-Step Solution

Task 1: Create development VPC manually

Create a VPC called griffin-dev-vpc with the following subnets only:
- griffin-dev-wp
  - IP address block: 192.168.16.0/20
- griffin-dev-mgmt
  - IP address block: 192.168.32.0/20

To get started with this, we must first sign into Cloud Console with the credentials provided in the lab. After that, we then proceed to activate the Cloud Shell, which is illustrated in the image below;

Now in the Cloud Shell;

Run this command to authenticate the Cloud Shell: A popup is likely to be displayed, click on the “Activate“ button and move ahead.

gcloud auth list

Confirm that you’re in the right project:

gcloud config list project

Save the Region and Zone provided in the lab instructions as variables in your Cloud Shell so they can be easily reused. We will be using the values mentioned earlier here for the Region and Zone respectively.

export REGION=us-central1
export ZONE=us-central1-a

Run the echo command to confirm that the right values have been saved.

echo $REGION
echo $ZONE

These commands should print out us-central1 and us-central1-a to the console respectively.

Create the griffin-dev-vpc network with the command below. We will also set the subnet mode of the network to custom, thus allowing us to manually create our own subnetworks from the network.

gcloud compute networks create griffin-dev-vpc --subnet-mode custom

Create griffin-dev-wp subnetwork using the IP address block: 192.168.16.0/20 as the range and specifying the provided region as our preferred resource location.

gcloud compute networks subnets create griffin-dev-wp --network griffin-dev-vpc --range 192.168.16.0/20 --region $REGION

Create griffin-dev-mgmt subnetwork using the IP address block: 192.168.32.0/20 as the range and specifying the provided region as our preferred resource location.

gcloud compute networks subnets create griffin-dev-mgmt --network griffin-dev-vpc --range 192.168.32.0/20 --region $REGION

This completes Task 1. Wait for the command to finish executing and click on the “Check my progress” button to confirm completion.

Task 2: Create Production VPC Manually

Create a VPC called griffin-prod-vpc with the following subnets only:
- griffin-prod-wp
  - IP address block: 192.168.48.0/20
- griffin-prod-mgmt
  - IP address block: 192.168.64.0/20

This is basically a replica of the previous task just with different names for the vpc network and subnetworks.

Create griffin-prod-vpc.

gcloud compute networks create griffin-prod-vpc --subnet-mode custom

Create griffin-prod-wp subnetwork.

gcloud compute networks subnets create griffin-prod-wp --network griffin-prod-vpc --range 192.168.48.0/20 --region $REGION

Create griffin-prod-mgmt subnetwork.

gcloud compute networks subnets create griffin-prod-mgmt --network griffin-prod-vpc --range 192.168.64.0/20 --region $REGION

This completes Task 2. Wait a few moments for the command to finish running and click on the “Check my progress” button to confirm.

Task 3: Create Bastion Host

Create a bastion host (instance) with two network interfaces, one connected to griffin-dev-mgmt and the other connected to griffin-prod-mgmt. Make sure you can SSH to the host.

To achieve this, we need to create an instance called bastion with two network interfaces, one created on the griffin-dev-vpc network so we can connect the bastion instance to the griffin-dev-mgmt subnetwork through it, and the other created on the griffin-prod-vpc network so we can also connect the bastion host instance to the griffin-prod-mgmt subnetwork through it.

We need to ensure we can SSH into the instance by adding the ssh tag in the command and specify the zone where the instance should be created.

After this is done, we need to set up firewall rules for both the griffin-dev-vpc and the griffin-prod-vpc networks connected to the bastion host. This is important for Security, Access Control, Logging, and Monitoring of network traffic going out and coming into the bastion instance.

Run the command below to create the bastion instance:

gcloud compute instances create bastion --network-interface=network=griffin-dev-vpc,subnet=griffin-dev-mgmt --network-interface=network=griffin-prod-vpc,subnet=griffin-prod-mgmt --tags=ssh --zone=$ZONE

Create the firewall rule for the griffin-dev-vpc network that only allows SSH traffic on TCP port 22.

We can use 0.0.0.0/0 as the source range to accept connection from any IP on the internet, although this is not ideal, a dedicated IP address should be used in real-world scenarios, but since this is only a challenge lab in a temporary environment, this can be used to make our lives easier.

We will also set the target tags as ssh so they correlate with the tag we set up during the creation of the bastion instance. This ensures the firewall rules will only apply to instances with the ssh tag.

gcloud compute firewall-rules create fw-ssh-dev --network=griffin-dev-vpc --source-ranges=0.0.0.0/0 --target-tags ssh --allow=tcp:22

Create the firewall rule for the griffin-prod-vpc network.

gcloud compute firewall-rules create fw-ssh-prod --network=griffin-prod-vpc --source-ranges=0.0.0.0/0 --target-tags ssh --allow=tcp:22

This completes task 3. Click on the “Check my progress” button to confirm completion.

Task 4: Create and Configure Cloud SQL Instance.

Create a MySQL Cloud SQL Instance called griffin-dev-db in $REGION.

* Run this command to create a MySQL Cloud SQL Instance. This creates the SQL instance with “password“ used as the `root-password`, you can use whatever suits you here, but take note of it because it will be used to sign into the database later on.

gcloud sql instances create griffin-dev-db --root-password password --region $REGION

Run the command below to connect to the SQL instance you just created. You will be prompted to enter a password, enter the password you used in the previous instance creation command. Here it is “password“.

gcloud sql connect griffin-dev-db

Once in the MySQL environment, copy and paste in the SQL queries provided below and press enter. Type exit to come out of the SQL environment once done. Take note of the username: wp_user and password: stormwind_rules they will be used in later steps. These SQL queries prepare the WordPress environment:

CREATE DATABASE wordpress;
CREATE USER "wp_user"@"%" IDENTIFIED BY "stormwind_rules";
GRANT ALL PRIVILEGES ON wordpress.* TO "wp_user"@"%";
FLUSH PRIVILEGES;

This completes Task 4, click “Check my progress“ to confirm completion.

Task 5: Create Kubernetes Cluster

Create a 2 node cluster (e2-standard-4) called griffin-dev, in the griffin-dev-wp subnet, and in zone $ZONE.

Run the command below to achieve this. Specifying the machine-type as e2-standard-4, number of nodes as 2, network as griffin-dev-vpc, subnetwork as griffin-dev-wp, and zone as the provided lab zone.

gcloud container clusters create griffin-dev --machine-type e2-standard-4 --num-nodes 2 --network griffin-dev-vpc --subnetwork griffin-dev-wp --zone $ZONE

Click “Check my progress“ to confirm completion

Task 6: Prepare the Kubernetes Cluster.

From Cloud Shell copy all files from gs://cloud-training/gsp321/wp-k8s.

Do this with the command below

gsutil cp -r gs://cloud-training/gsp321/wp-k8s .

Now change directory to the wp-k8s folder.

cd wp-k8s

Now inside the folder, edit the wp-env.yaml by running this command:

nano wp-env.yaml

Once the file content is open, edit it to look like below. Changing the username field to wp_user and the password field to stormwind_rules respectively.

GNU nano 7.2                                                                                                       wp-env.yaml                                                                                                                 
kind: PersistentVolumeClaim
apiVersion: v1
metadata:
  name: wordpress-volumeclaim
spec:
  accessModes:
    - ReadWriteOnce
  resources:
    requests:
      storage: 200Gi
---
apiVersion: v1
kind: Secret
metadata:
  name: database
type: Opaque
stringData:
  username: wp_user
  password: stormwind_rules

Save the file and exit nano by pressing CTRL+O, then Enter, then CTRL+X.

Now that we’ve appropriately edited the file, we need to create the configuration based on the resources specified in the wp-env.yaml file. We do this by running the following command:

kubectl create -f wp-env.yaml

Next is to provide a key for the service account. The service account has already been set up with the lab so we don’t have to worry about it. The service account provides access to the database for a sidecar container (A sidecar container is a secondary container that runs alongside the main application container in the same Pod in Kubernetes. It is commonly used to extend or enhance the functionality of the main application without modifying its core logic).

Use the command below to create and add the key to the Kubernetes environment.

gcloud iam service-accounts keys create key.json \
    --iam-account=cloud-sql-proxy@$GOOGLE_CLOUD_PROJECT.iam.gserviceaccount.com
kubectl create secret generic cloudsql-instance-credentials \
    --from-file key.json

This completes Task 6. Click on the “Check my progress“ button to confirm completion.

Task 7: Create a WordPress Deployment.

Now that you have provisioned the MySQL database, and set up the secrets and volume, you can create the deployment using wp-deployment.yaml.

Before you create the deployment you need to edit wp-deployment.yaml.
Replace YOUR_SQL_INSTANCE with griffin-dev-db's Instance connection name.
Get the Instance connection name from your Cloud SQL instance.
After you create your WordPress deployment, create the service with wp-service.yaml.

Edit the wp-deployment.yaml file by running the command below to open it up with the nano editor in the Cloud Shell.

nano wp-deployment.yaml

Once opened you will see something like this:

GNU nano 7.2                                                                                                    wp-deployment.yaml                                                                                                             
apiVersion: apps/v1
kind: Deployment
metadata:
  name: wordpress
  labels:
    app: wordpress
spec:
  replicas: 1
selector:
    matchLabels:
      app: wordpress
  template:
    metadata:
      labels:
        app: wordpress
    spec:
      containers:
        - image: wordpress
          name: wordpress
          env:
          - name: WORDPRESS_DB_HOST
            value: 127.0.0.1:3306
          - name: WORDPRESS_DB_USER
            valueFrom:
              secretKeyRef:
                name: database
                key: username
          - name: WORDPRESS_DB_PASSWORD
            valueFrom:
              secretKeyRef:
                name: database
                key: password
          ports:
            - containerPort: 80
              name: wordpress
          volumeMounts:
            - name: wordpress-persistent-storage
              mountPath: /var/www/html
        - name: cloudsql-proxy
          image: gcr.io/cloudsql-docker/gce-proxy:1.33.2
          command: ["/cloud_sql_proxy",
                    "-instances=YOUR_SQL_INSTANCE=tcp:3306",
                    "-credential_file=/secrets/cloudsql/key.json"]
          securityContext:
            runAsUser: 2  # non-root user
            allowPrivilegeEscalation: false
          volumeMounts:
            - name: cloudsql-instance-credentials
              mountPath: /secrets/cloudsql
              readOnly: true
      volumes:
        - name: wordpress-persistent-storage
          persistentVolumeClaim:
            claimName: wordpress-volumeclaim
        - name: cloudsql-instance-credentials
          secret:
            secretName: cloudsql-instance-credentials

Edit the file by changing YOUR_SQL_INSTANCE to griffin-dev-db. You can confirm the instance connection name from Cloud Console by navigating to SQL > Instances like so:

Change WORDPRESS_DB_USER to wp_user, and WORDPRESS_DB_PASSWORD to stormwind_rules

Save the file and exit nano by pressing CTRL+O, then Enter, then CTRL+X.

Create the WordPress Deployment by running the following command

kubectl create -f wp-deployment.yaml

Create the Service by running the following command

kubectl create -f wp-service.yaml

You can check that the deployment and service have been created by running the following commands

kubectl get deployments
kubectl get services

This completes Task 7. Click on the “Check my progress“ button to confirm completion.

Task 8: Enable Monitoring.

Create an uptime check for your WordPress development site. This periodically verifies the availability of the WordPress development site.

You can do this by running the following command:

gcloud monitoring uptime create wp-uptime-check \
    --resource-type=uptime-url \
    --resource-labels=host=EXTERNAL_IP_ADDRESS

We specify the uptime check name to be wp-uptime-check, resource-type to be uptime-url because this is a URL-based uptime check to check if the website is available, and use the WordPress load balancer External IP address as the resource-label . You can get the EXTERNAL_IP by running kubectl get services.

Task 9: Provide Access for an Additional Engineer

You have an additional engineer starting and you want to ensure they have access to the project. Grant them the editor role to the project.

The second user account for the lab represents the additional engineer.

We do this by navigating to the IAM & Admin section in Cloud Console to edit the role of the second user provided in the lab from Viewer to Editor as the case may be. This is illustrated in the images below:

Find the second user detail:

Locate the second user on the IAM page in Cloud Console and Click on the Edit icon:

Click on the Role field and Select Editor under the Roles section:

Click Save once done:

This completes Task 9. Click on “Check my progress“ to confirm completion.

Conclusion

This is one of the most challenging labs in the Google Cloud Associate Cloud Engineer journey, it might take a couple of tries (like it did for me 😅) to fully understand some nuances and take note of important steps that one might otherwise overlook and get stuck as a result.

That’s why I made it a duty to write this article and provide as much detail and explanation as possible so it can make the lives of others who might be attempting this lab sometime in the future just a bit easier. I hope I’ve been able to do that.

Reach out on LinkedIn and let’s connect, or you can find me on my Portfolio if you’d like to discuss an opportunity to work together.

See you on the next one. Cheers 🥂

Mastering GSP313: Step-by-Step Guide to Implementing Load Balancing on Google Cloud Compute Engine.

Emmanuel Oloke — Thu, 03 Apr 2025 22:39:36 +0000

Introduction

As 2024 came to an end, I took and passed the Google Cloud Associate Cloud Engineer (ACE) exam. The entire experience brought me into a new light in Cloud Engineering thanks to the GET Certified Program by Google Cloud Skills Boost.

Understanding the infrastructure on which the tools and technologies we use and build as Software Engineers rely goes a long way in contributing to the quality of the work we produce and a better understanding of the design of great software systems.

While going through the GET Certified Program, we were made to get our hands dirty with some required labs that must be passed to complete the program. One of the labs I found quite interesting and slightly challenging was the GSP313- Implement Load Balancing on Compute Engine: Challenge Lab.

In this article, I aim to provide a clear, actionable, and command-driven guide to solving the lab. I hope this can be of help to aspiring Google Cloud Associate Cloud Engineers, beginners, and those preparing for hands-on labs.

Overview of GSP313 Challenge Lab

Topics tested in the lab include:

Create an instance.
Create an HTTP load balancer in front of two web servers.

Prerequisites

Active Qwiklabs subscription or Google Cloud free trial
Credits on Google Cloud Skills Boost
Basic knowledge of Google Cloud CLI and Compute Engine.

Step-by-Step Solution

Task 1: Create a project jumphost instance

To get started, click on the “Activate Cloud Shell“ button towards the top right of the Google Cloud Console, then;

Check that you’re in the right project:

gcloud config list project

Or set your project:

gcloud config set project [PROJECT_ID]

Set REGION and ZONE:

gcloud config set compute/region [REGION]
gcloud config set compute/zone [ZONE]

Create the instance:

gcloud compute instances create [INSTANCE_NAME] --machine-type e2-micro

This completes Task 1, you can check your progress here.

Task 2: Set up an HTTP Load Balancer

Create an HTTP load balancer with a managed instance group of 2 Nginx web servers

Copy and paste the script below to the terminal and press enter, this will create the startup.sh\ file and use the code to configure the web servers.

cat << EOF > startup.sh
#! /bin/bash
apt-get update
apt-get install -y nginx
service nginx start
sed -i -- 's/nginx/Google Cloud Platform - '"\$HOSTNAME"'/' /var/www/html/index.nginx-debian.html
EOF

Create an instance template: This command is to create an instance template with the following specifications:

1. The instances created from this template will use an **e2-medium** machine type (2 vCPUs and 4 GB of memory) as specified in the lab instructions.

2. The **startup script** (from [`startup.sh`](http://startup.sh)) will run on each instance at boot to configure it automatically.

gcloud compute instance-templates create [INSTANCE_TEMPLATE_NAME] --machine-type=e2-medium --metadata-from-file startup-script=startup.sh

Create a target pool for the nginx servers: The purpose of this command is to create a target pool that can:

1. Distribute incoming traffic among its member instances in a regional load balancer setup.

2. Perform health checks on the instances in the pool to ensure that only healthy instances receive traffic.

gcloud compute target-pools create [TARGET_POOL_NAME]

Create a managed instance group based on the template: This command creates a managed instance group:

1. It creates 2 VM (Virtual Machine) instances (`--size 2`) as specified in the lab instructions using a specified instance template.

2. The instances in the group are assigned a base name (`—-base-instance-name`) of `nginx`.

3. The group is automatically linked to a target pool for load balancing.

gcloud compute instance-groups managed create [INSTANCE_GROUP_NAME] --base-instance-name nginx --size 2 --template [INSTANCE_TEMPLATE_NAME] --target-pool [TARGET_POOL_NAME]

Confirm that 2 additional instances have been created based on the instance template specified with this command. You should see 3 instances, the one we created in Task 1, and another 2 nginx instances created as the instance group.

gcloud compute instances list

Create the firewall rule: Allow traffic on TCP port 80, which is typically used for HTTP traffic to flow into the Google Cloud instances. It's commonly used for configuring web servers or load balancers that need to accept HTTP traffic. Use the firewall rule name provided in the lab instructions (e.g. accept-tcp-rule-723)

gcloud compute firewall-rules create [FIREWALL_RULE_NAME] --allow tcp:80

Create a forwarding rule: This directs incoming traffic to a specific target pool on port 80. The target pool is a collection of backend instances that will process the traffic.

gcloud compute forwarding-rules create [FORWARDING_RULE_NAME] --region [REGION] --ports=80 --target-pool [TARGET_POOL_NAME]

Create a health check: The health check will regularly monitor the health of the backend instances (e.g., in an instance group) by making HTTP requests to them. If an instance fails the health check, it will not receive traffic until it passes the check again.

gcloud compute http-health-checks create [HEALTH_CHECK_NAME]

Set named ports for the managed instance group: The purpose of this command is to configure a named port (http:80) for the specified managed instance group. Named ports are useful for identifying ports that the load balancer can use to direct traffic to backend instances in the group.

gcloud compute instance-groups managed \
        set-named-ports [INSTANCE_GROUP_NAME] \
        --named-ports http:80

Create a backend service: This command creates a backend service that will be used in the HTTP(S) load balancer. The backend service specifies how traffic is distributed across backend resources (such as instance groups) and also includes a health check to ensure that the backend resources are healthy and able to handle requests.

gcloud compute backend-services create [BACKEND_SERVICE_NAME] --protocol HTTP --http-health-checks [HEALTH_CHECK_NAME] --global

Add the instance group as the backend to the backend service group with the named port (http:80): This command adds an instance group to a backend service. The backend service then directs traffic to the instance group as part of the load-balancing process.

gcloud compute backend-services add-backend [BACKEND_SERVICE_NAME] --instance-group [INSTANCE_GROUP_NAME] --instance-group-zone [ZONE] --global

Create a URL map: This defines how incoming HTTP(S) requests/traffic are routed to the default backend service. The URL map allows the HTTP(S) load balancer to inspect the URL of the incoming request and forward it to the appropriate backend service.

gcloud compute url-maps create [URL_MAP_NAME] --default-service [BACKEND_SERVICE_NAME]

Create a target HTTP proxy to route requests to the URL map: This creates an HTTP target proxy and associates it with the URL map. The HTTP target proxy acts as a bridge between the frontend (the global forwarding rule) and the backend service. It uses the URL map to determine how incoming requests should be routed to the appropriate backend service.

gcloud compute target-http-proxies create [HTTP_TARGET_PROXY_NAME] --url-map [URL_MAP_NAME]

Create a forwarding rule: This configures a global forwarding rule that directs incoming HTTP traffic on port 80 to the target HTTP proxy we’ve created. Essentially serving as the Load Balancer.

gcloud compute forwarding-rules create [FORWARDING_RULE_NAME] --global --target-http-proxy [HTTP_TARGET_PROXY_NAME] --ports 80

This completes Task 2 and the Lab as a whole. It may take from 5 to 7 minutes after running this command to get the score for this task.

Conclusion

I hope this article has been detailed enough to help you on your journey and further shed some light on some seemingly confusing terms if any.

See you on the next one. Cheers 🥂

Timeout 2023: Implementing App Timeout in React

Emmanuel Oloke — Thu, 03 Apr 2025 22:34:42 +0000

Introduction

What a year 2023 has been, it feels just like yesterday I could hear loud fireworks and excitement celebrating what was then a new year. Fast forward to now, a lot has changed, I've experienced immense professional growth this year.

I started writing technical articles such as this, which improved both my technical skills and my writing skills exponentially. I completed my Master's degree in Computer Science this year, explored opportunities to contribute to different projects, and greatly improved my Software Engineering skills. Got a great recommendation and now working on a project I'm passionate about.

I'm grateful for all the ups and downs I've experienced all year long. Here's to a more fulfilling 2024 ahead! 🥂

In this article, I share a straightforward approach to implementing timeout functionality for a React app by creating a provider and wrapping the entire app with it.

Prerequisites

It is important to have a good knowledge of Javascript, React, and Vite to fully enjoy the sweets in this piece.

Do I really need a timeout?

Most web applications may not need a timeout functionality, however, if you are building a project that handles sensitive user details or a financial application where users perform transactions and leave their money in your care, then it is extremely important to have some sort of timeout functionality that monitors user activity and triggers some action when a set time elapses. Some advantages of this include;

Security and Privacy Enhancement - The possibility of illegal access to a user's account is decreased with the aid of timeouts. An automatic timeout makes sure that the session ends after a set amount of time in the event that the user forgets to log out or leaves the app unattended.
Resource Management - The timeout feature can be used to release and free server resources linked with a user session. This is especially significant in cases when resources are limited, and it is critical to efficiently manage and release resources when they are no longer required.
Compliance with Security Standards - Many security standards and best practices propose using timeouts to prevent session hijacking and illegal access. Adherence to these standards contributes to the application's security and compliance.

Now that we've established the importance of having timeout functionality in an app, let's go ahead and implement it.

Implementing Timeout in React.

We start by bootstrapping our React app using Vite. Navigate to your preferred directory and run the following commands to set up the app.

npm create vite@latest
// select Typescript as the preferred language, and
// specify the project name, here it is app-timeout 

cd app-timeout

npm install

npm run dev

We also need to install react-router-dom and @types/node, to help with routing and provide the appropriate types we need respectively. Run the code below to do this:

npm i react-router-dom 
npm install --save-dev @types/node

In the src folder, create a new folder named components, in there create another folder called providers and in there create a file and name it timeout-provider.tsx. In this file, add the following code:

import { ReactNode, useEffect, useRef } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

export function TimeoutProvider({ children }: { children: ReactNode }) {
  const navigate = useNavigate();
  const location = useLocation();
  const timeoutRef = useRef<NodeJS.Timeout>();

  useEffect(() => {
    if (exemptedRoutes.includes(location.pathname)) return;
    const handleWindowEvents = () => {
      clearTimeout(timeoutRef.current);

      timeoutRef.current = setTimeout(() => {
        // perform whatever logic you want in here, clear localStorage and log user out, show a popup modal or just navigate to another page
        navigate('/2024');
      }, 10000);
    };

    // listen for specific window events to ensure user is still active
    window.addEventListener('mousemove', handleWindowEvents);
    window.addEventListener('keydown', handleWindowEvents);
    window.addEventListener('click', handleWindowEvents);
    window.addEventListener('scroll', handleWindowEvents);

    handleWindowEvents();

    //cleanup function
    return () => {
      window.removeEventListener('mousemove', handleWindowEvents);
      window.removeEventListener('keydown', handleWindowEvents);
      window.removeEventListener('click', handleWindowEvents);
      window.removeEventListener('scroll', handleWindowEvents);
    };
  }, [navigate, location.pathname]);

  return children;
}

const exemptedRoutes = ['/404', '/sign-up', '/forgot-password'];

Getting straight to business, the above code is the main functionality of this feature, here we begin by importing the necessary hooks we will need from react and react-router-dom which we've installed to help manage routing in our react app. We then created our provider function called TimeoutProvider and exported it.

We initialized the TimeoutProvider function to expect children of type ReactNode which is essentially any node that could be rendered in React (e.g., JSX, strings, numbers, fragments, etc.). Then we initialized navigate, location and timeoutRef variables with the appropriate hooks, navigate is used from react-router-dom to route between different pages in our react app, location to track the current location path, and timeoutRef used to track our timeout element.

The entire basis of our approach is to listen to some events and if a user stops performing all of these events, the user is deemed idle and the timeout is triggered after a set period of time.

We achieve this by using a useEffect, we made provisions for some routes to be exempted, for example, there's no point triggering timeout when a user is trying to sign up on your app or when they are trying to reset their password, however, there may be other scenarios where it will be appropriate to exempt some other routes too as you see fit.

A function handleWindowEvents is then created to handle what happens when none of the events we're listening for has been performed, and trigger the timeout after the set period. We essentially clear any existing timeout and then set a new timeout. A time of 10000ms (10 seconds) is used for the purpose of this article, ideally, this value might come from a Backend service.

If none of the events are triggered and the time runs out, then we can perform whatever logic we want, in our case, we simply usher ourselves into the year 2024 by navigating to /2024 page.

When the useEffect renders, we listen for the mousemove, keydown, click and scroll events, these are the events that tell if a user is active on a page or not, and we run the handleWindowEvents function whenever any of these events get triggered. We also make sure to call the handleWindowEvents on the first render of the useEffect.

We perform a cleanup function when the component unmounts by removing all the event listeners, passed navigate and location.pathname into the dependency array and return children. We also initialize and specify some routes we want to be exempted.

Update the code in the main.tsx file to the code below:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';

import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import { Home } from './pages/Home.tsx';
import { NextYear } from './pages/2024.tsx';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: '/',
        element: <Home />,
      },
      {
        path: '/2024',
        element: <NextYear />,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Here we create our router and map each route to its corresponding component.

In the src folder, create a new folder called pages and in there create two new files called Home.tsx and 2024.tsx

In Home.tsx put the following code:

export function Home() {
  return (
    <div>
      <p style={{ fontSize: '2rem', fontWeight: 'bold' }}>Adios 2023, thanks for a great time!🫡</p>
    </div>
  );
}

In 2024.tsx put the following code:

export function NextYear() {
  return (
    <div>
      <p style={{ fontSize: '2rem', fontWeight: 'bold' }}>Welcome to 2024!!!🎉🍾🎊</p>
    </div>
  );
}

Finally, update the code in App.tsx to the following:

import './App.css';
import { Outlet } from 'react-router-dom';
import { TimeoutProvider } from './components/providers/timeout-provider';

function App() {
  return (
    <TimeoutProvider>
      <Outlet />
    </TimeoutProvider>
  );
}

export default App;

By wrapping Outlet with the TimeoutProvider we created, we've made sure that our timeout functionality is available to every page in the react app apart from the exempted ones. Hence this achieves the goal of implementing a timeout for a react application.

Conclusion

What a special way for 2023 to "timeout" 😉. There may be other approaches to implementing this functionality, if you know another cool way, please leave a comment and share. I hope this article has been of great help to you.

I look forward to an amazing 2024, and getting to share more valuable content as I progress in this life and career journey.

Here is the Github Repo link to the code sample used in this article.

Cheers to a happy new year in advance!!! 🥂

Using Intersection Observer API in React

Emmanuel Oloke — Thu, 03 Apr 2025 22:29:07 +0000

Introduction

There are different reasons to perform some functionalities or animation effects when a user scrolls on a web page. Examples of this could be to toggle a class, to conditionally render different components based on scroll or a certain element position, or to animate elements in and out of the viewport. There are also several ways to get this done; we can use scroll event listeners, scroll animation libraries, or JavaScript's Intersection Observer API.

In this article, we will explore the benefits and drawbacks of these approaches and also go on to discuss further the Intersection Observer API and how it can be used in React.

Prerequisites

Before we proceed, it is important to note that a basic knowledge of HTML, CSS, JS, and React is crucial to fully understanding the concepts discussed in this article. That being said, let's get into it!

Scroll Event Listeners

If you want to make an event happen on Scroll, it is probably a no-brainer to go with a Scroll event listener, as that will give you exactly what you want... initially. But as I'm sure there will be other edge cases to consider in a real-life project, you'll soon realize that this brings even more trouble because this said event would then happen every time the user scrolls on the webpage. Unless in specific use cases, this will ultimately become annoying to the user and eventually lead to some issues, such as;

Performance: Scroll event listeners trigger an event every time the user scrolls the page, which can lead to a high number of events being fired. Handling these events in real-time can be computationally expensive and cause performance issues, especially on complex web pages or on devices with limited resources.
Jank and Stuttering: When scroll event listeners are used to update elements on the page, such as animating or manipulating DOM elements, it can result in janky and stuttering scrolling experiences. This occurs because the scroll events are processed in the main thread, potentially blocking other critical operations.
Lack of Control: Scroll events fire continuously while scrolling, even if you're only interested in specific points or sections on the page. This can make it challenging to optimize code or trigger actions at specific scroll positions.

Scroll Animation Libraries

Animation is one of the most common usages of scroll events. Having elements fade in and fade out, changing shapes and styles as the user scrolls through the webpage, has been a game changer in designing aesthetically pleasing websites.

My personal top two animation libraries for React are Framer Motion and GSAP. These libraries are hands down the best out there right now, in my opinion, and are more than capable of bringing wild creative imaginations to life.

But most times, it is just best to really keep simple things simple. Sure using animation libraries may be fancy and whatnot, but if what you're trying to do is straightforward and simple enough, I see no reason to bloat up your code base with another library when you can achieve the same thing with a built-in Javascript API.

Intersection Observer API

While working on an open-source project I'm contributing to over the past week, there was a need to implement the design of a component that changes state based on its position in the viewport. I knew that I didn't want the state change to happen just on scroll, and I also did not want to install any third-party package unless it was absolutely necessary. After much research and trial, Intersection Observer API gave me the perfect solution I was looking for, which was the main motivation behind this article.

The IntersectionObserver() is a JavaScript API designed specifically for efficiently observing changes in the intersection of an element with its parent container or the viewport. Apart from the already mentioned need to keep things simple, it also offers the following improvements over scroll event listeners:

Performance Optimization: Intersection Observer is designed to optimize performance by providing a callback that executes when elements enter or exit the viewport or another defined area. This approach reduces the number of events fired and allows the browser to handle the observations more efficiently.
Asynchronous Execution: The scrolling and layout operations are separated from the JavaScript execution via the Intersection Observer API's asynchronous operation. This division eliminates jank and stuttering, resulting in a more fluid scrolling experience.
Granular Control: You can provide particular targets and thresholds for observing element visibility with Intersection Observer's second parameter, which is an options object. This gives you more control and flexibility by allowing you to selectively watch and respond to changes in particular parts or sections of a page.
Better Resource Management: Intersection Observer helps to optimize the use of system resources by keeping track of element visibility. It enables you to save bandwidth and enhance efficiency by allowing you to load or unload content, lazy load images, or activate animations only when necessary.

Enough talk. Show me the code!

Now we are going to build a simple project just to demonstrate how the Intersection Observer API works and how we can use it within a React project. The aim of this project is simply to change the styles of the navigation bar and also make it stick to the top of the page when the user scrolls.

We start by bootstrapping a React project with Vite by navigating to a preferred directory and running the following commands:

npm create vite@latest
// select Typescript as the preferred language, and
// specify the project name, here it is react-intersection-observer 

cd react-intersection-observer

npm install

npm run dev

After running these commands, we should have our React project running in the browser

Go ahead and delete index.css file as we won't be needing it and in App.css, add the following code:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
}

.sentinel {
  background-color: skyblue;
  height: 5px;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: skyblue;
  padding: 2rem;
}

.stuck {
  position: sticky;
  top: 0px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  color: #fff;
  transition: all 0.3s;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

section {
  width: 90%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  border-radius: 10px;
  padding: 50px;
  margin: 50px 0;
}

.title {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.content {
  color: #999ea9;
  line-height: 2rem;
  text-align: justify;
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  color: #fff;
  background-color: skyblue;
}

@media screen and (min-width: 768px) {
  section {
    width: 60%;
  }
}

The above style declarations contain all the styling required for the finished project. Nothing fancy going on, just basic CSS to make everything look clean.

In main.tsx, remove the import for index.css and leave everything else as is.

Now, in the App.tsx, this is where everything comes together. Go ahead and replace everything with the following code:

import { useEffect, useRef, useState } from 'react';
import './App.css';

function App() {
  const [intersecting, setIntersecting] = useState<boolean>(true);
  const sentinelRef = useRef<HTMLDivElement | null>(null);
  const navRef = useRef<HTMLDivElement | null>(null);
  const observerOptions = {
    root: null,
    rootMargin: '0px',
    treshold: 1.0
  };

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) {
        setIntersecting(true);
        navRef.current?.classList.add('stuck');
      } else {
        setIntersecting(false);
        navRef.current?.classList.remove('stuck');
      }
    }, observerOptions);

    if (sentinelRef.current !== null) {
      observer.observe(sentinelRef.current);
    }
  });

  return (
    <main>
      <div className="sentinel" ref={sentinelRef}></div>

      <nav ref={navRef} className="navbar">
        <h2>Hashnode Articles</h2>
        <h3>Emmanuel Oloke</h3>
      </nav>

      <div className="container">
        <section>
          <h1 className="title">Using Intersection Observer API in React</h1>
          <article className="content">
            There are different reasons to perform some functionalities or animation effects when a
            user scrolls on a web page. Examples of this could be to toggle a class, to
            conditionally render different components based on scroll or a certain element position,
            or to animate elements in and out of the viewport. There are also various ways to get
            these done; we can use scroll event listeners, scroll animation libraries, or
            Javascript's IntersectionObserver API. In this article, we will explore the benefits and
            drawbacks of these approaches and also go on to discuss further the IntersectionObserver
            API and how it can be used in React...
          </article>
        </section>

        <section>
          <h1 className="title">Building Charts with React and ChartJS</h1>
          <article className="content">
            Data visualization tools are powerful for analyzing and communicating complex data sets
            in a more accessible and intuitive way. With the advent of modern web technologies,
            creating interactive data visualizations has become easier than ever before. React and
            Chart.js are two popular technologies developers can use to create dynamic and
            interactive data visualizations...
          </article>
        </section>

        <section>
          <h1 className="title">useEffect vs useSWR</h1>
          <article className="content">
            The concept of data fetching in React applications is of high importance as it is often
            necessary to fetch data from an external source, such as an API or a database, and use
            that data to render components. React provides several ways to fetch data, including the
            built-in fetch method and popular third-party library Axios. One popular approach to
            data fetching in React is to use hooks like useEffect and useSWR from the swr
            third-party npm package. These hooks allow developers to fetch data and manage its state
            within a component, making it easy to update the UI in response to changes in the
            data...
          </article>
        </section>
      </div>
      <footer>
        <h2>Emmanuel Oloke</h2>
        <h3>&copy; 2023, All rights reserved</h3>
      </footer>
    </main>
  );
}

export default App;

Now to fully explain how everything works and bring it all together. To use the Intersection Observer API in React, we turn to our good old friends useState, useEffect, and useRef hooks.

We first declare a state variable called intersecting and the typical setter function as setIntersecting and initialize it to a boolean value of true. This is the variable that will hold the information on whether or not the nav element is intersecting so we can perform whatever function we want to, be it adding or removing a CSS class as we have done here or performing some other functions.

Next, we have the sentinelRef which is an HTMLDivElement. The purpose of this sentinel element is to stand as a guard just above the nav element, and then we use the Intersection Observer to observe and alert us once it leaves or enters the viewport so we can perform the desired actions on the nav element based on that information.

The navRef variable declared as an HTMLDivElement is used to select the nav element from the document, the same way you would do document.querySelector('nav') in vanilla Javascript. With this, we have access to the nav element, and we can now access the classList property and add or remove a class from the element.

The Intersection Observer API takes in a callback function and an options object. This options object passed into the IntersectionObserver() constructor lets you control the circumstances under which the observer's callback is invoked. It has the following fields:

root: The element that is used as the viewport for checking the visibility of the target. It must be the ancestor of the target. It defaults to the browser's viewport if not specified or if null.
rootMargin: This refers to the margin around the root. It can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). These values can also be in percentages. This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. It is all zeros by default.
threshold: Either a single number or an array of numbers that indicate at what percentage of the target's visibility the observer's callback should be executed. If you only want to detect when visibility passes the 50% mark, you can use a value of 0.5. If you want the callback to run every time visibility passes another 25%, you would specify the array [0, 0.25, 0.5, 0.75, 1]. The default is 0 (meaning as soon as even one pixel is visible, the callback will be run). A value of 1.0 means that the threshold isn't considered passed until every pixel is visible.

With all the declarations taken care of, we can now go ahead and use them. To do this, we use React's useEffect hook to watch the intersecting state variable and perform the callback function every time it changes.

In the useEffect, we declare a variable called observer and assign the IntersectionObserver constructor to it. Inside the constructor, we destructure out the entry object in order to gain access to its isIntersecting property. To visualize this, if we console.log the entry object this is what we get back:

Then we proceed to check, if (!entry.isIntersecting). That is if the element we are observing, which in this case will be the sentinelRef is not intersecting (no longer in the viewport). Then we want to set intersecting state variable to true and add the stuck class to the nav element. Else, we set intersecting state variable to false and remove the stuck class. As the second parameter for the IntersectionObserver constructor, we pass in the observerOptions already declared. I mostly used default values which have been explained here as nothing too fancy is going on.

In essence, that is all the logic we need. We are watching for an element to enter or leave the default or specified viewport and performing an operation based on that fact.

Finally, to invoke the observer constructor, we access the observe property on it and pass in the element we want to observe. Which, in this case, is the sentinelRef which points the sentinel element above the nav in the DOM.

The remaining parts of the code are just dummy content to flesh out the page.

And with that, our project now looks like this in the browser:

You can also view the end result in the link below in case there's a rendering problem.

End Result

Conclusion

Although there are several tools and libraries out there that can do more sophisticated animations on scroll. But as I said earlier in the article, sometimes it's nice to keep the simple things simple and not have to rely on libraries all the time.

I hope you find this helpful. Do let me know in the comment section, and don't hesitate to like and share as you will.

Here is a link to the live version of the project we just built: Live Project

And also the GitHub repo for the code.

Thanks for reading up to this point. Until next time, cheers!🥂

References

Intersection Observer API - MDN Documentation
React Hooks - React Documentation

React's useEffect vs. useSWR: Exploring Data Fetching in React.

Emmanuel Oloke — Thu, 03 Apr 2025 22:04:21 +0000

Introduction

The concept of data fetching in React applications is of high importance as it is often necessary to fetch data from an external source, such as an API or a database, and use that data to render components. React provides several ways to fetch data, including the built-in fetch method and popular third-party library Axios. One popular approach to data fetching in React is to use hooks like useEffect and useSWR from the swr third-party npm package. These hooks allow developers to fetch data and manage its state within a component, making it easy to update the UI in response to changes in the data.

By choosing the right approach to data fetching and using the appropriate tools, developers can create performant and responsive applications that provide a great user experience.

In this article, we are going to explore fetching data with React's useEffect hook, its main purpose and benefits, its drawbacks, and why you may want to use the useSWR hook for your data fetching moving forward in your React app.

Prerequisites

As always, before we proceed, it is important to note that knowledge of React and a bit of TypeScript is required to fully grasp the concepts discussed in this article.

Now let's get into it.

The Almighty useEffect

The useEffect hook was introduced in React version 16.8, released in February 2019. It gave the ability to perform side effects on functional components. Side effects are actions you want to perform when your component mounts, updates, or unmounts. This was to mimic the componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle methods in class components, and it allows developers to manage side effects, such as fetching data, updating the DOM, and subscribing to events within functional components. The introduction of useEffect was a major milestone for React, as it made it easier for developers to write functional components that could perform the same tasks as class components without sacrificing performance or readability.

Since its introduction, useEffect has become one of the most widely used hooks in the React ecosystem, and it has been instrumental in making React more accessible to developers of all skill levels.

In the useEffect section of this article, I explained with code samples how we could use the useEffect hook to replicate lifecycle methods of class components, do check it out.

Using useEffect for data fetching has its advantages and disadvantages depending on the scope of the project you're working on. For example, if you need to fetch data from a certain API endpoint and repeat that action when state variable changes in our component, then the useEffect hook is perfect for this kind of scenario. However, some of the drawbacks to this approach include the fact that useEffect does not provide additional features for handling things like loading and error state management.

To demonstrate and better explain this, we will build a simple react application bootstrapped with Vite and TypeScript and use Random User Generator API as our endpoint to get some data.

Enough talk. Let's get into the code.

To start with, we scaffold the project by navigating into our desired directory and running the following command:

npm create vite@latest

Running this command will give us some prompts, and you can provide them with the following options:

Project Name: swr-datafetching
Select a Framework: React
Select a variant: TypeScript

This will run for some time, and after, we can then run the following command:

cd swr-datafetching

npm install

npm run dev

We can then check the browser to see that the development server is running fine and open up the directory in a preferred code editor, in my case VSCode.

To start with, since this is a TypeScript project and we know the structure of the data the random user API will return to us, we first have to declare the types that we'll be using, we will not be using all the data returned by the API in this project, but it's advisable to type them anyway do to avoid being yelled at by the TypeScript compiler.

To do that, in the src folder, create a new file, and name it types.ts then add the following code in there:

export type ResultsProperties = {
  gender: string;
  name: Name;
  location: Location;
  email: string;
  login: Login;
  dob: DobOrRegistered;
  registered: DobOrRegistered;
  phone: string;
  cell: string;
  id: Id;
  picture: Picture;
  nat: string;
};
export type Name = {
  title: string;
  first: string;
  last: string;
};
export type Location = {
  street: Street;
  city: string;
  state: string;
  country: string;
  postcode: number | string;
  coordinates: Coordinates;
  timezone: Timezone;
};
export type Street = {
  number: number;
  name: string;
};
export type Coordinates = {
  latitude: string;
  longitude: string;
};
export type Timezone = {
  offset: string;
  description: string;
};
export type Login = {
  uuid: string;
  username: string;
  password: string;
  salt: string;
  md5: string;
  sha1: string;
  sha256: string;
};
export type DobOrRegistered = {
  date: string;
  age: number;
};
export type Id = {
  name: string;
  value?: string | null;
};
export type Picture = {
  large: string;
  medium: string;
  thumbnail: string;
};
export type Info = {
  seed: string;
  results: number;
  page: number;
  version: string;
};

The API returns an object with results and info properties which also contain other properties and objects, so what we did here was to properly type those properties to keep the TypeScript compiler happy.

Now inside src/App.tsx file, replace the content with the following code:

import { useEffect, useState } from 'react';
import './App.css';

import { ResultsProperties } from './types';

function App() {
  const [user, setUser] = useState<ResultsProperties | null>(null);
  const apiUrl = 'https://randomuser.me/api/';

  const fetcher = async (url: string) => {
    const response = await fetch(url);
    const data = await response.json();
    setUser(data.results[0] as ResultsProperties);
  };

  useEffect(() => {
    fetcher(apiUrl);
  }, []);

  const avatar = user?.picture;
  const largeAvatar = avatar?.large;

  const name = user?.name;
  const fullName = `${name?.title} ${name?.first} ${name?.last}`;

  return (
    <div className="App">
      {user === null ? (
        <h3>Loading...</h3>
      ) : (
        <>
          <img src={largeAvatar} alt="medium sized avatar image" style={{ borderRadius: '50%' }} />
          <h3>{fullName}</h3>
        </>
      )}
    </div>
  );
}

export default App;

In the above code, the aim is to render the user avatar and name data returned from the random user API to the screen. To achieve that, we start by importing useEffect and useState hooks from react and also the necessary styling from ./App.css. We then created a state variable called user initialized to null, and also initialized apiUrl variable with the appropriate API endpoint.

After that, we declared a fetcher function, which takes in a url parameter of type string, we used async/await and the fetch method to fetch data from the provided endpoint, parse the response as json() to the data variable and set the user state variable to the data.results[0] property as type ResultsProperties.

Then we call the useEffect hook, pass our fetcher function into the callback and pass an empty array of dependencies as the second argument to indicate that we want this effect to only run once after each render.

With this, we get access to the user object and use it to determine what the component renders. Note that in the returned JSX element, we had to manually implement the loading state by checking if user === null and conditionally rendering a different JSX element while the user data is being loaded. This is one of the drawbacks of useEffect as mentioned earlier in the article.

The other drawback has to do with the React.Strictmode. this only runs in development and does not affect production build. In previous versions, the Strictmode only mounts a component once, but from React 18, it does that twice, which can be confusing if not fully understood. Basically, with React.Strictmode our components gets mounted, unmounted, and mounted again, this can make it seem as if our component is being mounted twice in development, which as a result, in our case, will make our API call twice, as seen below.

If we look in the browser console, we can see that the API call was logged twice. To fix this, we can simply remove the React.Strictmode tag wrapping out App component in src/main.tsx file, or provide a clean-up function to our useEffect hook.

This all seems quite unnecessary for the scope of the application we're trying to build. What if there were a better way with additional perks even? Enter useSWR!

useSWR

useSWR is a custom hook provided by the swr library from Vercel that helps handle data fetching and caching in React components. It uses a technique called "Stale-While-Revalidate" (SWR), where it returns the cached data immediately and then fetches updated data in the background. This can help improve the perceived performance of an app by reducing the number of loading spinners and network requests.

To implement useSWR in our project, we first install the swr package by running the following command:

npm install swr

Then replace the code in our src/App.tsx with the following:

import useSWR from 'swr';
import './App.css';

import { ResultsProperties } from './types';

function App() {
  const apiUrl = 'https://randomuser.me/api/';

  const fetcher = async (url: string) => {
    const response = await fetch(url);
    const data = await response.json();
    return data.results[0];
  };

  const { data: user, isLoading, error } = useSWR<ResultsProperties>(apiUrl, fetcher);

  const avatar = user?.picture;
  const largeAvatar = avatar?.large;

  const name = user?.name;
  const fullName = `${name?.title} ${name?.first} ${name?.last}`;

  return (
    <div className="App">
      {isLoading ? (
        <h3>Loading...</h3>
      ) : error ? (
        <h3>An error occured</h3>
      ) : (
        <>
          <img src={largeAvatar} alt="medium sized avatar image" style={{ borderRadius: '50%' }} />
          <h3>{fullName}</h3>
        </>
      )}
    </div>
  );
}

export default App;

In the above code, we've removed the useEffect and useState hooks and replaced them with useSWR imported from swr instead, also, we are now returning data.results[0] as opposed to setting it to user variable with useState. Most of the implementation stays the same, but now with the useSWR method, all we need to do is call it and pass it our apiURL and the fetcher function as arguments. With that, we can then destructure out the data returned by the fetcher function and name it user. Also, the useSWR method provides us with two important functionalities for better state management of our API request, the isLoading variable (boolean) and the error (object). With this, we can better manage our API requests without having to manually implement things ourselves.

Now if we look in the browser console, we see that the API request is now only made once, even in Strictmode

Another advantage of useSWR is DEDUPING, which is basically a process of removing identical entries from two or more data sets. What this means is that if, for whatever reason, we are making API calls to the same endpoint in different places in our application, useSWR has the ability to dedupe that request and make it once instead, then reuse it in other identical places, thereby reducing the number of network requests required.

Other advantages include:

Avoids unnecessary re-render
No unnecessary requests
Avoid unnecessary code imports

Conclusion

To be honest, I will personally use useSWR more going forward, just because it offers more advantages in my opinion. However, useEffect has functionalities it was designed for originally, such as the life-cycle components implementation we discussed earlier in the article, amongst others, so if a project you are building requires you to do something similar to that, it will be a great option.

I hope you've found this piece helpful in one way or another. I had fun and learned more researching the topic and writing the article.

You can check out the finished code of the project built in this article here

Until I see you in the next one. Cheers 🥂✌🏽

Reference Resources

useSWR Documentation - Vercel
useEffect Documentation - React

Building Charts with React and ChartJS

Emmanuel Oloke — Thu, 03 Apr 2025 21:54:04 +0000

Introduction

Data visualization tools are powerful for analyzing and communicating complex data sets in a more accessible and intuitive way. With the advent of modern web technologies, creating interactive data visualizations has become easier than ever before.

React and Chart.js are two popular technologies developers can use to create dynamic and interactive data visualizations.

React is a widely-used JavaScript library for building user interfaces. Its component-based architecture and declarative syntax make it easy to create reusable UI components and manage complex states.

Chart.js is a popular, flexible, and easy-to-use open-source JavaScript library for creating responsive and customizable charts and graphs. Created and announced in 2013, it has ~60,000 Github stars and about 2.4 million weekly NPM downloads.

In this article, we will build a simple single-page application (SPA) to showcase how Chart.js can be used with React to create Line, Bar, and Pie Charts.

Prerequisite

Before we proceed, basic knowledge of JavaScript and React is required to grasp the concepts discussed in this article fully.

Come along and let's build together!

Project Setup

We start by first creating a new React application by running this NPM command:

npx create-react-app react-chartjs

This creates a new project folder react-chartjs with all the necessary files needed for a react application to run smoothly, then we proceed to remove all unnecessary files until we have a folder structure that looks like this:

Using ChartJS

After setting up our project, we now have to install the necessary packages to make Chart.js work in React. For that, we need to install two NPM packages. First, the chart.js package, which provides us with a set of frequently used chart types, plugins, and customization options that can be used for any type of application, not just react applications. And secondly, we need to install the react-chartjs-2 npm package, which is a wrapper for Chart.js in React applications and provides us with easy-to-use Chart.js components tailor-made for React.

To install these two packages, we run the following command:

npm install chart.js react-chartjs-2

After installation, the chart can not exist independently without some form of dataset being fed into it. Let's proceed to create this data file.

For the sake of this tutorial, we will create a dummy and random set of data that shows the customer gains and losses of an online business over a period of years.

To achieve this, in the src folder create a new file called data.js and populate it with the following code:

export const CustomerData = [
    {
        id: 1,
        year: 2017,
        customersLost: 820,
        customersGained: 60000
    },
    {
        id: 2,
        year: 2018,
        customersLost: 435,
        customersGained: 35000
    },
    {
        id: 3,
        year: 2019,
        customersLost: 565,
        customersGained: 48000
    },
    {
        id: 4,
        year: 2020,
        customersLost: 230,
        customersGained: 50000
    },
    {
        id: 5,
        year: 2021,
        customersLost: 120,
        customersGained: 40000
    },
];

Now that we have some data to work with, we can proceed to create the charts.

Creating the Bar Chart

A Bar Chart is a common statistical and data visualization tool. It is used to compare multiple datasets and to show trends in data side by side, represented by vertical bars. The react-chartjs-2 library exports a component Bar that is used for this purpose.

In the src folder, we will create a new folder components that will house all our component files for this project. Inside the components folder, create a new file, and name it BarChart.js then add the following code to the file.

import React from 'react';
import { Bar } from 'react-chartjs-2';
import { Chart, BarController, BarElement } from 'chart.js/auto';
import { CustomerData } from '../data';

Chart.register(BarController, BarElement);

const BarChart = () => {
  const data = {
    labels: CustomerData.map((data) => data.year),
    datasets: [
      {
        label: 'Cutomers Gained',
        data: CustomerData.map((data) => data.customersGained),
        backgroundColor: ['#4FD1C5', '#E9D8FD', '#FC8181', '#F3BA2F', '#2A71D0'],
      },
    ],
  };

  return (
    <div>
      <h1 style={{ color: '#319795' }}>Bar Chart</h1>
      <Bar data={data} />
    </div>
  );
};

export default BarChart;

Let's walk through this code:

We start by importing React from react which is typical for every React file. Then we imported the Bar component as a named export from react-chartjs-2 to give us access to the Chart.js Bar component tailored for React. We import Chart, which is the main Chart.js class from the special chart.js/auto path. It loads all available Chart.js components and also provides the register method, which we will use to register the BarController and BarElement classes that are required for the Bar component to be fully rendered. If this is not done, we get some errors in the console about some variables not being registered, so it's quite essential.

We proceed to create the BarChart ES6 functional component, and in there, we declare the data object. This is a Chart.js requirement as it holds the data and specifications that will be passed to the Chart.js Bar component to enable it to render the necessary data.

The data object takes in some properties, labels and datasets respectively. The labels consists of the information we want to show on the x-axis of the BarChart, which must be an array. In our case, this will be the year in review as specified in the CustomerData variable in our data.js file. We can extract the individual year into an array by simply running the javascript map function on the CustomerData variable and returning data.year value.

The datasets property also takes in an array of object with several properties. This is where the configuration and customization of the Bar Chart happens. Numerous properties can be set here depending on the developer's preference, but for the sake of this article, we're only going to use the necessary and needed ones. The label property takes in a string that serves as a title for the Chart, the data property like the labels property discussed in the previous paragraph also takes in an array containing the set of data that will be represented on the y-axis, which in our case, is the number of customers gained by the business as given in our data.js file, for this, we can also run a map function again on the CustomerData array, but this time return the data.CustomerGain value.

We can specify different background colors for each bar in the Bar Chart through the backgroundColor property. It takes in an array of color codes. The color code can be in various formats like color name, hex codes, or RGB values, the choice is yours. If only one color is specified, it will be applied to all the bars in the chart, and if two colors are specified, it will be alternated through the bars. Since we have a small dataset of only five elements, we can afford to set colors for each bar individually.

Finally, we return our JSX element, which is a div with a h1 tag for the chart heading, and the Bar component that takes in a prop called data and in there, we pass the data variable. Then we export the BarChart component as a default export to be imported and used elsewhere in our app.

And with that, the BarChart component is done. We can then go into our App.js file and render it with the following code:

import './App.css';
import BarChart from './components/BarChart';

function App() {
  return (
    <div className="App" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <div style={{ width: '60vw', marginBottom: '2em' }}>
        <BarChart />
      </div>
    </div>
  );
}

export default App;

In the code above, we import the BarChart component we've just created and render it so it can be visible in the browser.

We also added some inline styles to display and align things in place properly.

Way to go! Now when we view the project in the browser, we should have something like this:

And with that, we have successfully implemented the Chart.js Bar Chart.

In this article, I also want to show how we can use the line and pie charts from Chart.js. To do this, we will follow an identical approach to what we did with building the bar chart, with just a few changes. Come along as we explore them together.

Creating the Line Chart

A line chart is another type of data visualization tool, it is essentially a graph where intersections denote the data points on the x and y axis, and a line is drawn through them.

For the line chart, we will use another set of random data. This data represents an individual's account balance through the months of a year. So we add the following code to our data.js file:

export const BalanceData = [
  {
    id: 1,
    month: 'Jan',
    balance: 500,
  },
  {
    id: 2,
    month: 'Feb',
    balance: 300,
  },
  {
    id: 3,
    month: 'Mar',
    balance: 400,
  },
  {
    id: 4,
    month: 'Apr',
    balance: 500,
  },
  {
    id: 5,
    month: 'May',
    balance: 800,
  },
  {
    id: 6,
    month: 'Jun',
    balance: 650,
  },
  {
    id: 7,
    month: 'Jul',
    balance: 700,
  },
  {
    id: 8,
    month: 'Aug',
    balance: 690,
  },
  {
    id: 9,
    month: 'Sep',
    balance: 1000,
  },
  {
    id: 10,
    month: 'Oct',
    balance: 1200,
  },
  {
    id: 11,
    month: 'Nov',
    balance: 1050,
  },
  {
    id: 12,
    month: 'Dec',
    balance: 1300,
  },
];

We create the line chart by first creating a component for it. In the components folder, create a new file named LineChart.js and in there, add the following code:

import React from 'react';
import { Line } from 'react-chartjs-2';
import { BalanceData } from '../data';

import { Chart, LineElement } from 'chart.js';

Chart.register(LineElement);

const LineChart = () => {
  const data = {
    labels: BalanceData.map((data) => data.month),
    datasets: [
      {
        label: 'My Balance',
        data: BalanceData.map((data) => data.balance),
        lineTension: 0.5,
        backgroundColor: '#9F7AEA',
        borderColor: '#9F7AEA',
        pointBorderColor: '#B57295',
        pointBackgroundColor: '#fff',
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: '#D6BCFA',
        pointHoverBorderColor: '#D6BCFA',
        pointRadius: 3,
      },
    ],
  };

  return (
    <div>
      <h1 style={{ color: '#805AD5' }}>Line Chart</h1>
      <Line data={data} />
    </div>
  );
};

export default LineChart;

Just like we did in the BarChart.js file, we import React from 'react', but this time around, we import the Line component from the react-chartjs-2 library instead, this is the main Line component provided by Chart.js and it is what we will use to render the chart at the end. We then proceed to import the newly added BalanceData variable from our data.js file. Finally, for the imports, we import the Chart and the LineElement classes from the chart.js library and register them in the following line, similar to what we did while creating the BarChart component.

After all the imports are settled, we then proceed to create the ES6 functional component for the LineChart component. We declare the data variable as an object with labels and datasets properties respectively. For the labels property, as we did before, we map over the BalanceData array and extract out the data.month values to be used on the x-axis of the chart. For the datasets property, it takes in an array of object and in there, we specify the chart title with the label property as a string 'My Balance' and the data property which also takes in an array, and to get the desired data, we map over the BalanceData array again and extract the data.month values. To further customize the appearance of the line chart, there are several other properties provided by Chart.js that you can set. I've chosen to set some in this project, including the lineTension, backgroundColor, pointRadius, pointBorderColor, pointHoverBackgroundColor, etc. You can learn more about all the other properties provided by Chart.js in their official documentation.

Finally, we return a JSX element containing a h1 header for the title, and the Line component, which takes a data prop, and we then pass the data variable into it. After that, we export the LineChart as default from the file to be used in other parts of the app. And with that, we are done with the line chart.

To render the beautiful line chart we have just created, we need to edit our App.js file and add the following code to it:

import './App.css';
import BarChart from './components/BarChart';
import LineChart from './components/LineChart';

function App() {
  return (
    <div className="App" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <div style={{ width: '60vw', marginBottom: '2em' }}>
        <BarChart />
      </div>
      <div style={{ width: '60vw', marginBottom: '2em' }}>
        <LineChart />
      </div>
    </div>
  );
}

export default App;

As we've done before, we import the LineChart component we just created and render it in our JSX with additional inline styling for proper display and alignment.

Now if we view our app in the browser to check our progress so far, we see our creation, and it looks like this:

Beautiful. And it's interactive also, as you can hover over a data point to reveal more detailed information.

Now let's move on to the last chart in this article.

Creating the Pie Chart

Way to go. One more chart, and we are done. If we've learned anything from the previous two charts, then this next one should be a piece of "pie" for us, right?😉

The pie chart is another familiar data visualization tool. Data is segmented into different slices varying in size depending on their quantity or importance.

To create a pie chart using Chart.js, we will reuse the same data we used for the bar chart as shown earlier in this article, but this time, we will use the pie chart to showcase the customer loss of the business.

Let's go into our src folder and create a new component named PieChart.js, then add the following code in there:

import React from 'react';
import { Pie } from 'react-chartjs-2';
import { CustomerData } from '../data';

const PieChart = () => {
  const data = {
    labels: CustomerData.map((data) => data.year),
    datasets: [
      {
        label: 'Cutomers Lost',
        data: CustomerData.map((data) => data.customersLost),
        backgroundColor: ['#4FD1C5', '#E9D8FD', '#FC8181', '#f3ba2f', '#2a71d0'],
      },
    ],
  };

  return (
    <div>
      <h1 style={{ color: '#0BC5EA' }}>Pie Chart</h1>
      <Pie data={data} />
    </div>
  );
};

export default PieChart;

For the pie chart, not a lot of imports are needed. We just import React, Pie, and CustomerData from 'react', react-chartjs-2, and data.js respectively. Then we proceed to create our ES6 functional component, named PieChart. We declare the data object, and for the labels property, we map over the CustomerData array and extract the data.year values into a new array to display the years represented in the pie chart and create a set of keys for the chart. For the datasets property, we pass in the array of object and give the label property the string 'Customers Lost', this shows up on a label when you hover over each slice of the pie along with other data. Then for the data property, we map over the CustomerData array and return the data.customersLost values in a new array, and then we specify colors for each slice of the pie with the backgroundColor property, just like in the other types of charts we've built so far in this article.

Finally, we return a JSX element div containing a h1 heading with color inline styling and the Pie component, which takes a data prop, and we pass the data object to it. In the end, we export the PieChart component as default to be used in other places in our app.

We are now almost done. The last thing to do now is to render our newly built pie chart in the browser so we can see the beauty we've just created. To do that, we go into the App.js file and edit the code, so it looks like this:

import './App.css';
import BarChart from './components/BarChart';
import LineChart from './components/LineChart';
import PieChart from './components/PieChart';

function App() {
  return (
    <div className="App" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <div style={{ width: '60vw', marginBottom: '2em' }}>
        <BarChart />
      </div>
      <div style={{ width: '60vw', marginBottom: '2em' }}>
        <LineChart />
      </div>
      <div style={{ width: '600px', marginBottom: '2em' }}>
        <PieChart />
      </div>
    </div>
  );
}

export default App;

As we now already know, all we need to do is to import the PieChart component from our components folder and render it in our JSX with some styling to make it display pleasantly.

If we now check it out in the browser, this is what the result looks like:

And voila!! We now have this beautiful pie chart representing our data more pleasantly and intuitively.

Conclusion

Pheew, that was a lot, right? Thanks for sticking through to this point. This article aimed to demonstrate in a practical way how easy it can be to visually represent data in our React apps using awesome tools like Chart.js.

I understand that out in the real world, there may be the need to represent a lot more complex sets of data, and for that, Chart.js also provide other types of charts not discussed in this article, such as; bubble chart, radar chart, scatter chart, doughnut chart, etc. please check out the official documentation for a complete understanding of how they can be implemented should you need to, building on the concepts learned in this article.

I hope this article has been worth your time and that I've been able to impact knowledge through it. See you in the next one. Cheers ✌🏽

Bonus tip

Sometimes as developers, we get presented with data in a CSV file, and it's our responsibility to extract those data into a meaningful format we can more conveniently work with, like JSON.

One fantastic resource I came across while researching for this article was this website: https://csvjson.com/csv2json for converting any CSV file into JSON just with a few clicks. All you need to do is upload the CSV file, click Convert, and it spits out a nice JSON format for you. Do check it out and save yourself some headaches. You're welcome 😉

References

Chart.js Documentation - https://www.chartjs.org/docs/latest/
React ChartJS 2 Documentation - https://react-chartjs-2.js.org/
Code for the App - https://github.com/EmmanuelOloke/react-chartjs
Bonus Resource - https://csvjson.com/csv2json

State Management in React: An Introduction to Context API.

Emmanuel Oloke — Thu, 03 Apr 2025 21:42:41 +0000

Introduction.

Managing states is one of the fundamental aspect of any web application. In React, there are different types of states we developers have to keep in mind and manage when building which includes; Local State, Global State, Server State, and URL State. The importance of any of these mentioned states depends on the type of application the developer is trying to build.

In this article, we are going to look at two of the most important features in React, useState and Context API. Their benefits, why we need them, when to should use them, and the drawbacks.

Prerequisites.

We will be building a small React application in the course of this article, therefore a fundamental knowledge of React is required to fully grasp the concepts talked about in this article.

What is a State/State management in React?

In React, the process of storing and modifying a component's data or state is referred to as state management. It is employed to keep track of data changes and render UI elements in accordance with the most recent state.

As mentioned earlier, there are different states that needs to be managed in React depending on the size and type of the application being built, they are;

Local State: This is the data we handle in one or another component. For example, to store and display a text entered through a form in a particular component.
Global State: The data maintained across multiple components is called the global state. For example a user authentication data, we need to know anywhere in our application whether a user is authenticated or not, hence the need for such data to be globally available through the entire app.
Server State: Data that originates from an external server and must be rendered in or integrated with our UI state.
URL State: Data that exists in the URL, including the pathname and query or route parameters.

We will be focusing on just the Local State and the Global State in this article, so let's proceed by boostrapping our React application. Navigate to a preferred directory on your local machine and run the following command to create a new React project called react-context.

npx create-react-app react-context

Once the project has been created, navigate into the src folder and create a folder named components which will house the different components we will build as we proceed. Also, delete all unnecessary files until you have a file structure like this:

In the components folder create two components GameList.js and Game.js. Inside the GameList component add the following code.

import React, { useState } from 'react';
import Game from './Game.js';

function GameList() {
  const [games, setGames] = useState([
    {
      id: 1,
      name: "Assassin's Creed",
      year: '2016',
      cost: '90',
    },
    {
      id: 2,
      name: 'Agent 47',
      year: '2000',
      cost: '40',
    },
    {
      id: 3,
      name: 'Spiderman',
      year: '2018',
      cost: '80',
    },
    {
      id: 4,
      name: 'Call of Duty: Modern Warfare 3',
      year: '2011',
      cost: '105',
    },
    {
      id: 5,
      name: 'Elden Ring',
      year: '2022',
      cost: '60',
    },
  ]);
  return (
    <div>
      {games.map((game) => (
        <Game name={game.name} cost={game.cost} year={game.year} key={game.id} />
      ))}
    </div>
  );
}
export default GameList;

In the above code, we imported the useState hook, which is the React hook that helps us track state in a functional component, it can take in any type of data type, both primitive and non-primitive. We also imported the second component we created, Game, because we are going to use it as a child of GameList component to render the list of games. Then we proceeded to create a state variable games using the useState hook to hold an array of objects containing all our games data. In the return statement, we then use the map array method on the games state variable to render a Game component for each of the games in the games state.

We passed down the game.name, game.cost and game.year as props to the Game component through the name, cost, and year props respectively. This is the natural way of passing data in a React application, from a parent component down to a child component. The data can now be destructured and made use of in the child component file as we will see in a moment.

And finally we exported the entire component as a default export so it can be used anywhere else in our app.

In the Game.js file, add the following code:

import React from 'react';

function Game({ name, cost, year }) {
  return (
    <div>
      <h3>
        {name} (<em>{year}</em>)
      </h3>
      <p>#{cost}</p>
    </div>
  );
}

export default Game;

Here, we simply created a functional component Game and extracted the props passed down to it from the parent component GameList and used those props to render a div containing a h3 tag that renders the movie name and year released, and also a p tag that renders the cost to buy that game in a store. And as always we exported the Game as a default export to be used elsewhere.

At this point our App.js should look like this, to properly render the GameList component.


import GameList from './components/GameList';

function App() {
  return (
    <div className="App">
      <GameList />
    </div>
  );
}
export default App;

And if we test the app in the browser, we should have this:

Lifting up the State.

Now, let's say we want to have a simple nav bar that shows the title of our app and the number of games in our games list. To achieve that, we create a NavBar component, but inside the NavBar component, we need access to games array state variable so we can get and display the number of games in that array. With the way our app is currently set up, we do not have that access, so a momentary solution to this problem is to Lift up the state into a higher component, in this case the App component in order for other child components, NavBar and GameList to both have access to the state variable by passing it down to them through props.

In the NavBar component, add the following code. Some minimal inline styling have been added just to make it look a bit nice.

import React from 'react';

function NavBar({ games }) {
  return (
    <div
      style={{
        backgroundColor: '#3A66DB',
        padding: '0.5rem 0',
        display: 'flex',
        justifyContent: 'center',
      }}
    >
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          width: '50vw',
          color: 'white',
        }}
      >
        <h3>Favourite Games</h3>
        <p>List of Games: {games.length}</p>
      </div>
    </div>
  );
}
export default NavBar;

The GameList component now looks like this:

import React from 'react';
import Game from './Game.js';

function GameList({ games }) {
  return (
    <div style={{ textAlign: 'center' }}>
      {games.map((game) => (
        <Game name={game.name} cost={game.cost} year={game.year} key={game.id} />
      ))}
    </div>
  );
}
export default GameList;

And the App.js now has the following content after lifting up the state into it:

import React, { useState } from 'react';
import GameList from './components/GameList';
import NavBar from './components/NavBar';

function App() {
  const [games, setGames] = useState([
    {
      id: 1,
      name: "Assassin's Creed",
      year: '2016',
      cost: '90',
    },
    {
      id: 2,
      name: 'Agent 47',
      year: '2000',
      cost: '40',
    },
    {
      id: 3,
      name: 'Spiderman',
      year: '2018',
      cost: '80',
    },
    {
      id: 4,
      name: 'Call of Duty: Modern Warfare 3',
      year: '2011',
      cost: '105',
    },
    {
      id: 5,
      name: 'Elden Ring',
      year: '2022',
      cost: '60',
    },
  ]);
  return (
    <div className="App">
      <NavBar games={games} />
      <GameList games={games} />
    </div>
  );
}
export default App;

Our app now looks like this:

Prop Drilling.

Prop drilling in React is the process of using props to send information from a high-level component to a low-level component. This is necessary when components are nested and they need access to information that is not supplied to them directly. This method, however, might result in verbose and repetitive code and make it challenging to control data flow in a more complex application.

The problem now presented by our momentary solution of lifting up the state in our app is that we are prop drilling our state data. For example, in our app, to get the required games state to the Game component, we first have to pass it to the GameList component through props, then further pass it down to the Game component itself so it can be used.

Now imagine we have multiple deeply nested components that need a particular state variable, this approach will quickly make our code quite tedious to write and maintain. As earlier mentioned in this article, lifting up the state and only passing data down through props might be sufficient for a small application, but if building complex and robust application is the goal, React provides a better way to handle this.

Enter Context.

To avoid the problems of prop drilling, the Context API was introduced in React version 16.3. According to the React documentation, Context offers a method for automatically passing data down the component tree from parent to child components rather than needing to manually feed props at each level.

In essence, the components that want a prop can simply ask for it, avoiding the requirement for intermediary helper components that serve primarily to transmit the prop. This saves time and energy.

Creating a Context: Context Provider.

To create a context, we need to create a provider file which is going to hold the context provider function and serve the data saved in the context to whichever component that needs it.

Now let's create this provider in our app. Navigate to the src folder and make a new directory called contexts, inside here we create a new file GameContext.js this is where we will create our context and the provider that makes it available to other components.

In the GameContext.js file add the following code:

import React, { useState, createContext } from 'react';

export const GameContext = createContext();

export const GameProvider = (props) => {
  const [games, setGames] = useState([
    {
      id: 1,
      name: "Assassin's Creed",
      year: '2016',
      cost: '90',
    },
    {
      id: 2,
      name: 'Agent 47',
      year: '2000',
      cost: '40',
    },
    {
      id: 3,
      name: 'Spiderman',
      year: '2018',
      cost: '80',
    },
    {
      id: 4,
      name: 'Call of Duty: Modern Warfare 3',
      year: '2011',
      cost: '105',
    },
    {
      id: 5,
      name: 'Elden Ring',
      year: '2022',
      cost: '60',
    },
  ]);
  return (
    <GameContext.Provider value={[games, setGames]}>{props.children}</GameContext.Provider>
  );
};

In the above code, we start by importing useState which we will use to declare the state variable, and useContext, which is the method provided by React to create a context, then we created the context variable GameContext using the useContext method we've just imported.

We then declare the provider function GameProvider that takes in props, and we move our state variable games from App.js in here. Finally in the return statement, we return the <GameContext.Provider /> element and pass in the value of the state variable games and the setter function setGames to the value prop, then we pass in props.children to make whatever value being exported by the Provider available to all the enclosing child components.

useContext.

To use the context we have just created in any component of choice, React has made available the useContext method, which is designed for consuming Contexts in a React application.

Therefore, our GameList.js component we now look like this:

import React, { useContext } from 'react';
import Game from './Game.js';
import { GameContext } from '../contexts/GameContext.js';

function GameList() {
  const [games] = useContext(GameContext);
  return (
    <div style={{ textAlign: 'center' }}>
      {games.map((game) => (
        <Game name={game.name} cost={game.cost} year={game.year} key={game.id} />
      ))}
    </div>
  );
}
export default GameList;

We import the useContext method from React and also the MovieContext context file we created to make it available for use in this file.

We can now destructure out the state variable we want from the context by doing const [games] = useContext(GameContext); and perform our normal operation on it as we want.

The same thing can be done in the NavBar.js component:

import React, { useContext } from 'react';
import { GameContext } from '../contexts/GameContext';

function NavBar() {
  const [games] = useContext(GameContext);
  return (
    <div
      style={{
        backgroundColor: '#3A66DB',
        padding: '0.5rem 0',
        display: 'flex',
        justifyContent: 'center',
      }}
    >
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          width: '50vw',
          color: 'white',
        }}
      >
        <h3>Favourite Games</h3>
        <p>List of Games: {games.length}</p>
      </div>
    </div>
  );
}
export default NavBar;

Finally, to use the provider function GameProvider exported from our context file, we proceed into our App.js file and use it like so:

import React from 'react';
import GameList from './components/GameList';
import NavBar from './components/NavBar';
import { GameProvider } from './contexts/GameContext';

function App() {
  return (
    <GameProvider>
      <NavBar />
      <GameList />
    </GameProvider>
  );
}
export default App;

Here we basically wrap the components that need to use the state variable made available through the context inside the GameProvider element. This stop the need to individually pass the state variable down to the components and stops prop drilling which is primarily the major reason the Context API was created.

The Drawback.

The Context API in React has a key flaw in that it can cause components to be tightly coupled, which makes managing and maintaining the data flow in larger applications challenging. This is due to the Context API's reliance on components subscribing to context changes and updating their state accordingly. Essentially, everytime a context state changes, every component wrapped in or subscribed to that context will re-render, this can cause some performance issues as the application grows more complex.

Conclusion.

In conclusion, the React Context API is a powerful tool for managing state and data flow in React applications. It allows for the creation of centralized stores of data that can be accessed from any component within an application, without the need for props drilling. The API is easy to use and understand, making it a great solution for managing state in medium to large-scale React applications. The use of context also results in cleaner and more maintainable code, as well as improved performance. With its many benefits, the React Context API is definitely worth considering as a go-to solution for managing state in React applications.

Other tools like Redux maybe more suitable for state management in more complex applications, but I'd argue that using Context API alongside other React hooks such as useReducer will pretty much serve the majority of your needs.

Related Resources.

Here are some helpful resources I came across while researching and writing this article.

Managing State - React Docs
React Context API: A deep dive with examples - Adebiyi Adedotun | LogRocket

Code to the mini project build in this article can be found in this GitHub repository:

Project Code

Create a Card Component Using Chakra-UI

Emmanuel Oloke — Thu, 03 Apr 2025 21:10:17 +0000

Introduction.

Creating beautiful user interfaces in simple and stress-free ways has been the primary focus of Frontend Engineering in recent times. Although Frontend Engineering can get complex depending on the scope of the project you're working on, being able to do the simple things quickly and without too much hassle goes a long way in contributing to one's overall productivity.

Chakra-UI has been that library in recent times that allows me to build faster and implement most features in a simple way.

In this article, we will scratch the surface of Chakra-UI and learn how to create a simple card component using the library's in-built components. By the end of this article, you'll know what Chakra-UI is, its various benefits, some of the numerous components used in the library, basic styling of components, and putting it all together in a React project.

Prerequisites.

This article assumes the reader has the following:

Knowledge of HTML, CSS, and JS
Knowledge of React and Functional Components
NPM version 8.1 or higher installed on their local development machine.

Note: React version 18.2.0 was used in building the project for this article.

What is Chakra-UI?

As it says on the official website, Chakra-UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

As Developers/Engineers, we constantly strive to find new ways of spending lesser time doing most of our tasks, and Chakra-UI provides a way to achieve that. Spend less time writing UI code and more time building a great experience for your product and customers.

Benefits of using Chakra-UI.

Chakra UI is a React-based framework that offers a set of reusable and accessible components for building user interfaces. Some advantages of using Chakra UI include the following:

Accessibility: Chakra UI components are built with accessibility in mind and follow the WAI-ARIA guidelines.
Customizable: Chakra UI provides a powerful theme system that allows you to easily customize your application's look and feel.
Lightweight: Chakra UI is built with minimal CSS and focuses on providing a set of functional components, making it lightweight and fast.
Compatible with other libraries: Chakra UI is built with React and can be used with other popular libraries such as Next.js, Gatsby, and more.
Well-documented: Chakra UI provides detailed documentation for each component, including examples and props.
Flexible: Chakra UI provides a variety of components that can be used to build any kind of interface.

Installing Chakra-UI.

There are two ways to install Chakra-UI through Create React App, Automatic and Manual installation.

With Create React App, users can create a project using a template, which determines the files and dependencies included with the generated project.

Automatic Installation.

JavaScript Template.

To generate the starter template for a JavaScript project, run the command below:

npx create-react-app my-app --template @chakra-ui

TypeScript Template.

To generate the starter template for a TypeScript project, run the command below:

npx create-react-app my-app --template @chakra-ui/typescript

These approaches are similar to the base create-react-app template but come with Chakra UI dependencies pre-installed and include Chakra-specific functionality.

Manual Installation.

Inside your Create React App project, install Chakra-UI by running the following command:

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

Provider Setup.

After installing Chakra UI, you need to set up the ChakraProvider at the root of your application. This can be either in your index.jsx or index.tsx

Put in the following code:

import * as React from 'react'

// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'

function App() {
  // 2. Wrap ChakraProvider at the root of your app
  return (
    <ChakraProvider>
      <App />
    </ChakraProvider>
  )
}

And with that, you will have access to Chakra-UI and all its features and dependencies throughout your entire application.

Most of the information here and more can be found on the official documentation website of Chakra-UI.

Building the Card Component.

Now that we have our React App setup and Chakra-UI installed, let's proceed to the main point of this article and build out a simple Card Component to display basic information about an article; the article image, the title, and a sample text.

In our React App, we can delete all unnecessary files in the src folder leaving behind only the index.js file.

In the src folder, let's create two folders components and images to house our ArticleCard component and the articleImage respectively.

At this point, the structure of our app should look like this:

In the articleCard component file, copy and paste the code below:

import React from 'react';
import { Card, CardBody, Stack, Heading, Image, Text, Link } from '@chakra-ui/react';
import articleImage from '../images/chakra-image.png';

const ArticleCard = () => {
  const articleTitle = 'Creating a Card Component using Chakra-UI';
  const articleText =
    'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam quis a consequatur veniam debitis, iusto, perferendis...';
  return (
    <Card maxW="sm">
      <CardBody>
        <Image src={articleImage} borderRadius="8px 8px 0 0" />

        <Stack mt="6" spacing="3">
          <Heading
            as="u"
            textUnderlineOffset={3}
            color="#292F2E"
            fontWeight={800}
            fontSize="lg"
            lineHeight="tall"
          >
            <Link href="https://emmanueloloke.dev">{articleTitle}</Link>
          </Heading>
          <Text fontSize="sm" lineHeight="taller" color="#949796">
            {articleText}
          </Text>
        </Stack>
      </CardBody>
    </Card>
  );
};

export default ArticleCard;

While explaining the code above, I'll also take the liberty to touch on some of the in-built Chakra-UI components that make building with the library a breeze.

As with any React component, we first import React from 'react'; so we have access to all of React's component functionalities, then we import some Chakra-UI components necessary for the final implementation, namely:

Card - A flexible component used to group and display content in a clear and concise format. This comes out of the box from Chakra-UI and can be used to create any form of Card format you can think of. Chakra-UI exports 4 components to help you create a Card.
- Card - The parent wrapper that provides context for its children.
- CardHeader**:** The wrapper that contains a card's header.
- CardBody**:** The wrapper that houses the card's main content.
- CardFooter**:** The footer that houses the card actions.
Stack - A layout component used to group elements together and apply a space between them. Stacks elements in the vertical or horizontal direction. To be specific about the direction, you can use;
- VStack - Used to stack elements in the vertical direction, or
- HStack - Used to stack elements in the horizontal direction.
Heading - Used to render semantic HTML heading elements. It renders an <h2> tag by default. You can change the visual size by using the size props, enabling it to adjust automatically for smaller screens.
Image - Used to display images with support for fallback. The size of the image can be adjusted using the boxSize prop, which takes normal CSS size units.
Text - Used to render text and paragraphs within an interface. To increase the font size of the text, you can pass the fontSize prop. To truncate the Text after a specific number of lines, you can pass the noOfLines prop, this will render an ellipsis when the text exceeds the width of the viewport or maxWidth prop.
Link - This is an accessible element for navigation. it behaves like the tradition <a> tag and supports external linking by passing the isExternal prop too it.

The above Chakra-UI components are just a few we've used in the article. For a more detailed explanation and to learn more about numerous other components, check out the official documentation.

And finally, with the last line, we export the component so it can be imported and used app-wide.

In the index.js file, copy and paste the code below:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Box, ChakraProvider } from '@chakra-ui/react';
import ArticleCard from './components/ArticleCard';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ChakraProvider>
      <Box display="flex" justifyContent="center" alignItems="center" height="100vh">
        <ArticleCard />
      </Box>
    </ChakraProvider>
  </React.StrictMode>
);

The above code renders the component we've just built and makes it visible in the browser.

After the regular React imports, we also import the Box component alongside the ChakraProvider component from @chakra-ui/react. This is because I will use the Box component, which exports a <div> tag by default to centralize our card component vertically and horizontally on screen using flexbox properties. And finally, we import the ArticleCard component from the path ./components/ArticleCard.

Note: Be sure to get the right path here.

Within our ChakraProvide tags, we render the ArticleCard component within a Box component with display='flex', justifyContent='center', and alignItems='center' attribute to centralize it the flexbox way, as explained earlier.

Result.

At this point, your app should look exactly like this:

And voila, we've just made a clean-looking Card Component with little to no stress using Chakra-UI.

Conclusion.

In conclusion, this article aimed to scratch the surface and show the possibilities and ease that Chakra-UI offers. With tools like this, Engineers and companies can build and ship products faster and improve all-round productivity.

Feel free to check out the code of this article here and leave a star if you want 😁: https://github.com/EmmanuelOloke/chakra-article-card

Related Resources

What is Chakra-UI - Chakra UI Documentation
WAI-ARIA Guidelines - WAI-ARIA Overview
Article Code - GitHub Repo

Consuming REST APIs in React using FetchAPI, Async/Await, and useEffect.

Emmanuel Oloke — Mon, 24 Mar 2025 10:28:35 +0000

Introduction.

Making API requests and consuming data from different APIs is one of the significant backbones of any dynamic web-based project. This can be done in different ways, using Axios, a JavaScript library used to make HTTP Requests, and Fetch API, a browser-built-in web API.

In this article, we will learn about REST APIs, how to consume them in a React project using the fetch() API method, handling API request promises using Async/Await, and optimizing the process for our React App using the useEffect Hook.

What is an API?

Before we move forward, let's understand what an API is and why it is crucial in building software.

API stands for Application Programming Interface. It is a set of definitions and protocols for building and integrating application software. It is sometimes referred to as a contract between a provider of information and a user of that information, establishing the content required from the consumer (the request) and the content required by the producer (the response).

One analogy that helps understand this concept is imagining you're in a restaurant, a waiter caters to your order, and a Chef in the kitchen fulfills that order by preparing the meal you've requested. Now in web terminologies, you, the customer, are the CLIENT, the order you've made is the REQUEST, the Chef in the kitchen is the WEB SERVER, the meal that is brought back to you is the RESPONSE, and the waiter is the API.

What is a REST API?

A REST API (also known as RESTful API) is an application programming interface (API or web API) that conforms to the constraints of REST architectural style and allows for interaction with RESTful web services. The full meaning of REST is Representational State Transfer, and American Computer Scientist Roy Fielding created it.

A RESTful API transmits a representation of the resource's state to the requester or endpoint when a client request is made. One of the various formats, including JSON (Javascript Object Notation), HTML, XLT, Python, PHP, or plain text, is used to send this information or representation via HTTP. JSON is the most widely used file format because both humans and machines can read it.

Example of a REST API Response

The code below is a JSON object response received from making a GET request to the GitHub Open API. This API will be used to further explain more concepts down the line in this article.

{
    "login": "EmmanuelOloke",
    "id": 16335826,
    "node_id": "MDQ6VXNlcjE2MzM1ODI2",
    "avatar_url": "https://avatars.githubusercontent.com/u/16335826?v=4",
    "gravatar_id": "",
    "url": "https://api.github.com/users/EmmanuelOloke",
    "html_url": "https://github.com/EmmanuelOloke",
    "followers_url": "https://api.github.com/users/EmmanuelOloke/followers",
    "following_url": "https://api.github.com/users/EmmanuelOloke/following{/other_user}",
    "gists_url": "https://api.github.com/users/EmmanuelOloke/gists{/gist_id}",
    "starred_url": "https://api.github.com/users/EmmanuelOloke/starred{/owner}{/repo}",
    "subscriptions_url": "https://api.github.com/users/EmmanuelOloke/subscriptions",
    "organizations_url": "https://api.github.com/users/EmmanuelOloke/orgs",
    "repos_url": "https://api.github.com/users/EmmanuelOloke/repos",
    "events_url": "https://api.github.com/users/EmmanuelOloke/events{/privacy}",
    "received_events_url": "https://api.github.com/users/EmmanuelOloke/received_events",
    "type": "User",
    "site_admin": false,
    "name": "Emmanuel Oloke",
    "company": null,
    "blog": "http://twitter.com/I_am_Pope",
    "location": "Port Harcourt, Nigeria",
    "email": null,
    "hireable": null,
    "bio": "Developer and Tech Enthusiast",
    "twitter_username": "I_am_Pope",
    "public_repos": 45,
    "public_gists": 0,
    "followers": 12,
    "following": 16,
    "created_at": "2015-12-17T11:34:36Z",
    "updated_at": "2022-12-13T12:34:13Z"
}

FetchAPI and its Parameters.

The fetch() API is a JavaScript method built-in for retrieving resources from a server or API endpoint. Although it is comparable to XMLHttpRequest, the fetch API offers a more robust and flexible feature set.

The path or URL to the resource you wish to fetch is a required argument for the fetch() API function. Whether the request is successful(fullfilled) or not(rejected). It returns a promise that points to the response to the request. The second argument is the init option, which is optional.

Fetch API Parameters

resource - This is the path to the resource you wish to fetch. It may be a request object or a link to the resource path.
init - This represents an object containing any custom setting you’ll like to provide for your fetch() request. Below are the possible options the init object can contain.

methods - This specifies the type of HTTP request method, e.g., GET, POST, PUT, DELETE, etc.
headers- This specifies any headers you would like to add to your request. It is contained within a Headers object or an object literal with string values.
body - The body that you want to add to your request. This can be a Blob, BufferSource, FormData, URLSearchParams, USVString, or ReadableStream object. Note that a request using the GET or HEAD method cannot have a body.
mode - The mode you want to use for the request e.g cors, no-cors, or same-origin.
credentials - This represents the request credentials you want to use for the request. If you consider sending cookies automatically for the current domain, this option must be provided.

Using Fetch API in React with Async/Await.

In the example below, we are going to build a React component that makes a request using the GitHub Open API to fetch details about a user's GitHub repositories.

We will use the Async/Await approach, which enables asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to configure promise chains explicitly.

import React, { useState } from 'react';

const Repos = () => {
    const [repos, setRepos] = useState([]);
    const url = 'https://api.github.com/users/EmmanuelOloke/repos';

    const getRepos = async (API_URL) => {
        const response = await fetch(API_URL);
        const fetchedRepos = await response.json();
        setRepos(fetchedRepos);
    }
}

export default Repos;

To explain the above code, I've created a react functional component Repos in which I set a state variable repos using react's in-built useState() hook for state management. This state variable contains an empty array initially, but the eventual purpose is to hold the data which will be returned as a response from the API request we make, which will be an array of objects, where each object in the array represents a single repo of the user.

I declared a variable url which is a string containing the absolute path to the API endpoint we will fetch from.

An asynchronous function getRepos was declared, which will take in an API_URL parameter, pass that parameter into the fetch() method prepended with the await keyword because it is an asynchronous operation that returns a promise and saves the result in the response variable.

We use the .json() method on response to extract the JSON body content from response. This returns a Promise, hence the need for us to prepend with the await keyword, and then save the result in the fetchedRepos variable.

Note that despite the method being named json(), the result is not JSON but is instead the result of taking JSON as input and parsing it to produce a JavaScript object.

Finally, we use the second value of the useState() hook*,* which updates the state to update the repos state to the content of fetchedRepos

Bringing it all together with useEffect.

The useEffect() hook is one of the core React hooks added to the library in 2018. Its primary purpose is to allow us to perform side effects in our React Functional Components.

useEffect() accepts two arguments, a function, and an optional second parameter which is an array of dependencies.

To fully understand how useEffect() works, let's compare it with the equivalent React Class Component Lifecycle methods, which includes componentDidMount, componentDidUpdate, and componentWillUnmount

Equivalent of `componentDidMount` in `useEffect()`.

To perform the equivalent of componentDidMount using the useEffect()hook:

useEffect(() => {
    //... We perform whatever side effect function we want to do here.
});

By simply passing just the callback function to the useEffect() hook without the second argument, we perform the equivalent of the componentDidMount lifecycle method in class components. This way, the hook will be called every time the component updates or re-render.

Equivalent of `componentDidUpdate` in `useEffect()`.

To perform the equivalent of componentDidUpdate using the useEffect()hook:

useEffect(() => {
    //... We perform whatever side effect function we want to do here.
}, [dependency1, dependency2, dependency3]);

By passing a dependency array as the second argument to our useEffect() hook, we perform the equivalent of componentDidUpdate. During the lifetime of the component, the hook will fire if any of the dependencies in the array changes.

Note: If we pass an empty array of dependency as the second argument, the hook will fire once after a re-render.

Equivalent of `componentWillUnmount` in `useEffect()`.

To clean up after a component unmounts using the useEffect() hook, we need to return a function inside the hook's callback function and specify the cleanup actions we want to perform.

useEffect(() => {
    //... We perform whatever side effect function we want to do here.
    return () => {
        //... Clean up action to be taken.
    }
});

Now back in our Repos component, we can use the useEffect() hook to execute the getRepos function once the component mounts like so:

import React, { useState, useEffect } from 'react';

const Repos = () => {
    const [repos, setRepos] = useState([]);
    const url = 'https://api.github.com/users/EmmanuelOloke/repos';

    const getRepos = async (API_URL) => {
        const response = await fetch(API_URL);
        const fetchedRepos = await response.json();
        setRepos(fetchedRepos);
    }

    useEffect(() => {
        getRepos(url);
    });

    return (repos.map(repo => (
            <div>{repo.name}</div>
        ))  
    );
}

export default Repos;

In the above code, we added to the existing functionalities using the useEffect() hook. We declared the hook and passed only the callback function to it as a parameter. Inside it, we execute the getRepos() function and passed the url variable to it as its argument. By doing this, we ensure that the getRepos() function gets executed once the component mounts, and then we return a div containing the name of each repo by using the JavaScript map() function on the repos array.

Conclusion

Consuming different APIs is something we frequently do as Software Engineers, so an in-depth understanding of how it works is essential. I hope you enjoyed reading through this article and that you found it helpful in one way or the other. If you have any questions or suggestions, even if it's just a typo you noticed or something else you'd like to point out, please feel free to leave a comment. I'll reply to them all. Cheers!!!

Related Resources

What is a REST API - Red Hat
Fetch API - Mozilla Developer Network
GitHub Open API — GitHub Documentation
Using React useEffect hook with Lifecycle methods - LogRocket(Leonardo Maldonado)
Consuming REST APIs In React With Fetch And Axios - Smashing Magazine(Shedrack Akintayo)

DEV Community: Emmanuel Oloke

GSP321: Develop your Google Cloud Network - Challenge Lab Solution.

Introduction

Overview of GSP321

Prerequisites

Step-by-Step Solution

Task 1: Create development VPC manually

Task 2: Create Production VPC Manually

Task 3: Create Bastion Host

Task 4: Create and Configure Cloud SQL Instance.

Task 5: Create Kubernetes Cluster

Task 6: Prepare the Kubernetes Cluster.

Task 7: Create a WordPress Deployment.

Task 8: Enable Monitoring.

Task 9: Provide Access for an Additional Engineer

Conclusion

Mastering GSP313: Step-by-Step Guide to Implementing Load Balancing on Google Cloud Compute Engine.

Introduction

Overview of GSP313 Challenge Lab

Prerequisites

Step-by-Step Solution

Task 1: C*reate a project jumphost instance*

Task 2: Set up an HTTP Load Balancer

Conclusion

Timeout 2023: Implementing App Timeout in React

Introduction

Prerequisites

Do I really need a timeout?

Implementing Timeout in React.

Conclusion

Using Intersection Observer API in React

Introduction

Prerequisites

Scroll Event Listeners

Scroll Animation Libraries

Intersection Observer API

Conclusion

References

React's useEffect vs. useSWR: Exploring Data Fetching in React.

Introduction

Prerequisites

The Almighty useEffect

useSWR

Conclusion

Reference Resources

Building Charts with React and ChartJS

Introduction

Prerequisite

Project Setup

Using ChartJS

Creating the Bar Chart

Creating the Line Chart

Creating the Pie Chart

Conclusion

Bonus tip

References

State Management in React: An Introduction to Context API.

Introduction.

Prerequisites.

What is a State/State management in React?

Lifting up the State.

Prop Drilling.

Enter Context.

Creating a Context: Context Provider.

useContext.

The Drawback.

Conclusion.

Related Resources.

Create a Card Component Using Chakra-UI

Introduction.

Prerequisites.

What is Chakra-UI?

Benefits of using Chakra-UI.

Installing Chakra-UI.

Automatic Installation.

Manual Installation.

Provider Setup.

Building the Card Component.

Result.

Conclusion.

Task 1: Create a project jumphost instance

Equivalent of `componentDidMount` in `useEffect()`.

Equivalent of `componentDidUpdate` in `useEffect()`.

Equivalent of `componentWillUnmount` in `useEffect()`.