Introduction

Have you ever wondered how to make your React app communicate with the internet and fetch the data it needs? If you’re like most developers, you probably have used tools like Fetch or React Query, but did you know that there is another option that is gaining popularity among developers: Axios? Axios is a JavaScript library that simplifies making HTTP requests from your browser or Node.js server. It was created by Matt Zabriskie in 2014 and has over 10,800 stars on GitHub. Axios offers many advantages over other tools, such as easy configuration, automatic JSON parsing, error handling, and TypeScript support. In fact, Axios is one of the most popular libraries for making API calls in React with TypeScript, according to a survey by Stack Overflow. In this guide, I will show you how to set up Axios in your React app with TypeScript and use it to make API calls with ease. I will also share some practical approaches and best practices to help you get the most out of Axios in your projects. By the end of this guide, you’ll be able to:

1. Configure Axios in your React app with TypeScript and customize its settings.
2. Handle errors and exceptions gracefully with Axios
3. Optimize your API calls with Axios by using interceptors, cancel tokens, and timeouts.
4. Apply some of the best practices and tips for using Axios in your React projects with TypeScript.

Prerequisites

Before diving into the world of Axios and React, ensure that you have the following prerequisites in place:

• A working knowledge of React and TypeScript. You should be familiar with the basic concepts and syntax of React, such as components, props, state, hooks, and JSX. You should also be comfortable with TypeScript, a superset of JavaScript that adds static types and other features. TypeScript helps you write more robust and maintainable code, especially when working with complex data structures and APIs. If you need a refresher on React or TypeScript, you can check out these resources:
• React — A JavaScript library for building user interfaces.
• TypeScript — JavaScript with syntax for types
• A React project set up, preferably using any library/framework. You can use any tool or framework that you prefer to create and run your React app, such as Create React App, Next.js, Gatsby, or Vite. In this guide, we’ll be using Vite, a fast and lightweight tool that helps you set up a React project with TypeScript in minutes. You can learn more about Vite and how to install it here:
• Vite — A faster frontend build tool

Step 1: Installing Axios

Our journey begins with the installation of Axios. This is a crucial step, as Axios is the library that simplifies HTTP requests within your application. Axios is a JavaScript library that allows you to make HTTP requests from your browser or Node.js server. It supports both the Promise and async/await syntax, which makes your code more readable and maintainable. Axios also has many features that make it ideal for working with APIs, such as easy configuration, automatic JSON parsing, error handling, and TypeScript support. You can use Axios to make requests to any API endpoint, such as RESTful, GraphQL, or Firebase. In this guide, we’ll be using Axios to make requests to Dog API, a free and open-source API that provides random images and facts about dogs. You can learn more about the Dog API here:

• Dog API — The internet’s biggest collection of open-source dog pictures

To install Axios, open your terminal and run either of the following commands, depending on your package manager:

npm install axios
# or
yarn add axios

Here is a screenshot of the React project that I created. You can see that I have Axios installed in my package. Json file.

Step 2: Creating an Axios Instance

Creating an Axios Instance Axios instances provide a convenient way to manage global configurations for your requests. An Axios instance is an object that has all the methods and properties of the Axios library, but with some custom settings that apply to all the requests made with that instance. For example, you can set the base URL, the request headers, the timeout, and the error handling for your instance. This way, you don’t have to repeat these settings for each request, and you can keep your code more organized and consistent. To create an Axios instance, follow these steps:

• Create a file in your src folder, then create another folder and call it services. You can name it whatever you want, but this step is just for a good file structure.
• Inside the services folder, create a file called axiosInstance.ts. This is where you will define and export your Axios instance.
• Inside the axiosInstance.ts file, write the following code:

import axios, { AxiosInstance, AxiosError, AxiosResponse } from "axios";

const axiosClient = (token: string | null = null): AxiosInstance => {
  const headers = token
    ? {
        Authorization: `Bearer ${token}`,
        "Content-Type": "multipart/form-data",
      }
    : {
        "Content-Type": "multipart/form-data",
      };

  const client = axios.create({
    baseURL: "https://dog.ceo/api",
    headers,
    timeout: 60000,
    withCredentials: false,
  });

  client.interceptors.request.use((config: any) => {
    const token = localStorage.getItem("ACCESS_TOKEN");
    config.headers = config.headers || {};
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  });

  client.interceptors.response.use(
    (response: AxiosResponse) => {
      return response;
    },
    (error: AxiosError) => {
      try {
        const { response } = error;
        if (response?.status === 401) {
          localStorage.removeItem("ACCESS_TOKEN");
        }
      } catch (e) {
        console.error(e);
      }
      throw error;
    }
  );

  return client;
};

export default axiosClient;

The code above creates and configures an axios instance with TypeScript, which you can use to make HTTP requests to the Dog API. The axios instance has some custom settings that apply to all the requests made with it, such as the base URL, the headers, the timeout, and the error handling. You can also use the axiosClient function to create the instance with a token, if you need authentication with the API.

You don’t have to worry about the details of the code, as axios will handle the requests for you. However, if you want to learn more about how the code works and what each line does, you can read the comments and explanations below the code. They will help you understand the logic and the syntax of the code.

If you are not interested in the code, you can just skip to the next step, where I will show you how to use the axios instance to make API calls. You will see how easy and convenient it is to use axios with React and TypeScript.

import axios, { AxiosInstance, AxiosError, AxiosResponse } from “axios”;

// First, you import axios and some of its types from the axios library,
// AxiosInstance is the type for the axios instance object
// AxiosError is the type for the error object that you get when a request fails 
// AxiosResponse is the type for the response object that you get when a request succeeds

const axiosClient = (token: string | null = null): AxiosInstance => { 
// Next, you define a function called axiosClient that creates and returns an axios instance
// The function takes an optional parameter called token, which is either a string or null
// The token is used for authentication with the API, if needed 
// The function returns an axios instance, which is of type AxiosInstance

const headers = token ? { Authorization: Bearer ${token}, “Content-Type”: “multipart/form-data”, } 
: { “Content-Type”: “multipart/form-data”, };

// Then, you define a constant called headers, which is an object that contains the headers for the requests
// The headers object depends on whether the token is provided or not
// If the token is provided, the headers object has two properties: Authorization and Content-Type
// The Authorization property has the value of Bearer ${token}, which is a string that contains the token with the Bearer prefix
// The Bearer prefix is a convention that indicates the type of authentication scheme 
// The Content-Type property has the value of “multipart/form-data”, which is a string that indicates the type of data that is sent with the request 
// If the token is not provided, the headers object only has one property: Content-Type, with the same value as before

const client = axios.create({ baseURL: “https://dog.ceo/api”, headers, timeout: 60000, withCredentials: false, });

// After that, you define a constant called client, which is the axios instance that you create using the axios.create method
// The axios.create method takes an object as an argument, which contains some options for the instance
// The options that you use are:
// - baseURL: The base URL for the requests, which is the Dog API in this case
// - headers: The headers object that you defined earlier
// - timeout: The maximum time in milliseconds that the request can take
// - withCredentials: A boolean that indicates whether to send cookies with the request

client.interceptors.request.use((config: any) => { 
// Next, you add a request interceptor to the client instance using the client.interceptors.request.use method
// A request interceptor is a function that runs before each request and modifies or handles the request in some way
// The client.interceptors.request.use method takes two arguments: a function that runs on success and a function that runs on error
// In this case, you only use the first argument, which is a function that takes a config parameter and returns the modified config object
// The config parameter is an object that contains the request configuration, such as the url, the method, the data, and the headers 
// The config object is what axios uses to make the request

const token = localStorage.getItem("ACCESS_TOKEN");
// Inside the function, you get the token from the local storage using the localStorage.getItem method
// The local storage is a browser feature that allows you to store data in the browser
// The data is stored as key-value pairs, where the key is a string and the value is also a string
// In this case, the key is "ACCESS_TOKEN" and the value is the token
// The localStorage.getItem method takes the key as an argument and returns the value as a string or null

config.headers = config.headers || {};
if (token) {
  config.headers.Authorization = `Bearer ${token}`;
}
// Then, you set the headers for the config object using the config.headers property
// The config.headers property is an object that contains the headers for the request
// You use the || operator to make sure that the config.headers object exists, or create an empty object if it doesn't
// Then, you check if the token exists using an if statement
// If the token exists, you set the Authorization property of the config.headers object to `Bearer ${token}`, which is the same as the headers object that you defined earlier
// This way, you add the token to the request header, if it exists

return config;
// Finally, you return the modified config object, which will be used by axios to make the request
});

client.interceptors.response.use( (response: AxiosResponse) => {
 // Next, you add a response interceptor to the client instance using the client.interceptors.response.use method
 // A response interceptor is a function that runs after each response and modifies or handles the response in some way
 // The client.interceptors.response.use method takes two arguments: a function that runs on success and a function that runs on error
 // In this case, you use both arguments, which are functions that take a response parameter and return the modified response object
 // The response parameter is an object that contains the response data, such as the status, the data, and the headers
 // The response object is what axios returns to you when the request succeeds or fails

  return response;
  // Inside the first function, which runs on success, you just return the response object as it is
  // You don't need to modify or handle the response in any way, because you are happy with the default behavior of axios
},
(error: AxiosError) => {
  // Inside the second function, which runs on error, you handle the error response in some way
  // The error parameter is an object that contains some information about the error, such as the message, the code, and the response
  // The error object is what axios returns to you when the request fails
  // The error.response property is the same as the response object in the success case, but it also has a status property that indicates the HTTP status code
  // You can use the status property to handle different types of errors

  try {
    const { response } = error;
    if (response?.status === 401) {
      localStorage.removeItem("ACCESS_TOKEN");
    }
  } catch (e) {
    console.error(e);
  }
  // In this case, you use a try-catch block to handle the error response
  // The try-catch block allows you to execute some code and catch any errors that occur
  // Inside the try block, you write the code that you want to execute
  // Inside the catch block, you write the code that you want to execute when an error occurs
  // In this case, you only write code inside the try block, because you don't need to do anything else when an error occurs
  // Inside the try block, you do the following:
  // - You destructure the response property from the error object using the const { response } = error syntax
  // - You check if the response exists and if the status is 401 using the response?.status === 401 syntax
  // - The response?.status syntax is called optional chaining, which allows you to access a property of an object that may be undefined or null
  // - If the response exists and the status is 401, it means that the request was unauthorized, and the token was invalid or expired
  // - In that case, you remove the token from the local storage using the localStorage.removeItem method
  // - The localStorage.removeItem method takes the key as an argument and removes the key-value pair from the local storage
  // - In this case, the key is "ACCESS_TOKEN" and the value is the token

  throw error;
  // Finally, you throw the error object, which means that you re-throw the error to the caller of the axios instance
  // This way, you can handle the error in the component that uses the axios instance, such as showing an error message or retrying the request
}
);

// After adding the interceptors, you return the client object, which is the axios instance that you created and configured return client; };

export default axiosClient; // At the end of the file, you export the axiosClient function as the default export, which means that you can import it in other files without using curly braces

Step 3: Making a GET Request

Making a GET Request Now, let’s put Axios to work and make our first API call. We’ll use the GET method, which is the most common and simple way to fetch data from an API. The GET method requests a resource from a server, such as a web page, an image, or a JSON file. The server responds with the resource, or an error message if something goes wrong.

To test our API call, we’ll use Postman, a popular tool that helps you create and test API requests. You can download Postman for free from their website: Postman — API Development Platform. Postman has a user-friendly interface that allows you to enter the URL, the method, the headers, and the parameters of your request, and see the response in different formats, such as JSON, HTML, or XML.

To make a GET request to the Dog API using Postman, follow these steps:

• Open Postman and create a new request by clicking on the plus (+) sign in the top left corner.
• In the request tab, select GET as the method from the drop-down menu next to the URL field.
• In the URL field, enter the following URL: https://dog.ceo/api/breed/hound/images. This is the endpoint for getting random images of hound dogs from the Dog API.
• Click on the Send button to send the request to the server.
• In the response section, you should see a status code of 200, which means that the request was successful, and a JSON object that contains the response data. The JSON object has two properties: status and message. The status property has the value of “success”, which indicates that the request was successful. The message property has the value of an array of strings, which are the URLs of the dog images. You can also see the images in the Visualize tab, which shows a preview of the images.

Here is a screenshot of how the Postman interface looks like after making the GET request:

As you can see, making a GET request with Postman is very easy and convenient. However, we want to make the request from our React app, not from Postman. How can we do that? That’s where Axios comes in. Axios allows us to make the same request from our React app with just a few lines of code. Here is how we can do it:

import React, { useState, useEffect } from "react";
import "./app.css";
import axiosClient from "./services/AxiosInstance";

const App: React.FC = () => {
  const client = axiosClient();
  const [dogs, setDogs] = useState<string[]>([]);
  useEffect(() => {
    client
      .get("/breed/hound/images")
      .then((response) => {
        setDogs(response.data.message);
      })
      .catch((error) => {
        console.error("Error fetching dog images:", error);
      });
  }, []);
  return (
    <>
      <h1 className="page-title">Thank You For Reading 😇</h1>
      <div className="dog-card-container">
        {dogs.map((dog, index) => (
          <div key={index} className="dog-card">
            <div className="dog-label">Dog</div>
            <img src={dog} alt={"dog"} />
          </div>
        ))}
      </div>
    </>
  );
};

export default App;

The code above shows how to make a GET request with Axios in your React app. A GET request is a way to fetch data from an API, such as the Dog API. The code uses the axiosClient function that we created before, which returns an axios instance with some custom settings. The code also uses React hooks to create and update the state variable that stores the data, and to fetch the data when the component mounts.

You don’t have to understand every detail of the code, as the main idea is to use the client.get method and pass the URL of the endpoint. Axios will handle the rest for you, and you can use the response object to update your state and render your app.

However, if you want to learn more about the code, you can read the comments and explanations below the code.

If you are not interested in the code, you can skip to the next section.

Explanation

1. In our React app, open the App.tsx file, which is the main component of our app.
2. At the top of the file, import React, useState, useEffect, and the axiosClient function that we created in the previous step. We’ll use these to create and render our app.
3. Inside the App component, define a constant called client, which is the axios instance that we create by calling the axiosClient function. We don’t need to pass any token to the function, because the Dog API doesn’t require authentication.
4. Define a state variable called dogs, which is an array of strings that will store the URLs of the dog images. We’ll use the useState hook to create and update the state variable. We’ll initialize the state variable with an empty array, as we don’t have any data yet.
5. Define a side effect that will run once when the component mounts, and fetch the data from the API. We’ll use the useEffect hook to create the side effect. We’ll pass an empty array as the second argument to the hook, to indicate that the effect has no dependencies and should only run once.
6. Inside the effect, use the client.get method to make a GET request to the same URL that we used in Postman: /breed/hound/images. The client.get method takes the URL as an argument and returns a promise that resolves to the response object. We’ll use the then and catch methods to handle the promise.
7. Inside the effect, use the client.get method to make a GET request to the same URL that we used in Postman: /breed/hound/images. The client.get method takes the URL as an argument and returns a promise that resolves to the response object. We’ll use the then and catch methods to handle the promise.
8. Inside the then method, use the setDogs function to update the state variable with the data from the response. The response object has a data property, which contains the JSON object that we saw in Postman. The JSON object has a message property, which contains the array of URLs that we want. We’ll pass the response.data.message array to the setDogs function, which will update the state variable with the new data.
9. Inside the catch method, use the console.error method to log the error to the console. The error object has a message property, which contains the error message that we get from the server or from axios. We’ll pass the error object to the console.error method, which will print it to the console with a red color and an error icon. This is useful for debugging purposes, but you can also do something else with the error, such as showing a message to the user or reporting it to a service.
10. Return a JSX element that renders the app. We’ll use a fragment, which is a way to group multiple elements without adding extra nodes to the DOM. We’ll use the <> and </> syntax to create the fragment.
11. Inside the fragment, add a heading element that displays the title of the app. We’ll use the h1 element and give it a class name of “page-title”.
12. Add a div element that displays the dog images in a grid. We’ll use the div element and give it a class name of “dog-card-container”. We’ll use the map method to iterate over the dogs array and create a div element for each dog image. We’ll use the key prop to assign a unique key to each element, which is required by React to identify the elements. We’ll use the index of the array as the key, but you can also use something else, such as the URL itself. We’ll give each div element a class name of “dog-card”, which will style the element as a card. We’ll also add a div element inside the card that displays the label “Dog”. We’ll give this div element a class name of “dog-label”, which will style the element as a label. We’ll also add an img element inside the card that displays the image. We’ll use the src prop to assign the URL of the image to the element, and the alt prop to assign an alternative text to the element, which is “dog” in this case.
13. Export the App component as the default export, which means that you can import it in other files without using curly braces.

If you followed everything correctly, you should see something like this in your browser:

This is the result of making a GET request with Axios in your React app. You can see the title of the app, and a grid of dog images that are fetched from the Dog API. You can also open the developer tools and see the console log of the response object and the error object, if any.

As you can see, making a GET request with Axios is very easy and convenient. You just need to use the client.get method and pass the URL of the endpoint. Axios will handle the rest for you, such as parsing the JSON data, handling the errors, and returning the response object. You can then use the response object to update your state and render your app.

You can also use the same approach to make other types of requests, such as POST, PUT, PATCH, or DELETE. You just need to use the corresponding method of the client object, such as client.post, client.put, client.patch, or client.delete. You can also pass some additional arguments to the method, such as the data, the params, or the config. For example, if you want to make a POST request to create a new dog breed, you can do something like this:

client .post("/breed", { name: "Husky", origin: "Siberia", temperament: "Friendly", }) 
.then((response) => { console.log("Dog breed created:", response.data); }) 
.catch((error) => { console.error("Error creating dog breed:", error); });

You can learn more about the different methods and arguments of Axios in their documentation: Axios .

Conclusion

In this article, you learned how to use Axios, React, TypeScript, and Postman to make HTTP requests to any API endpoint. You learned how to create and configure an axios instance with TypeScript, how to use the axiosClient function to create the instance with a token, if needed, and how to add request and response interceptors to the instance. You learned how to use the client.get method to make a GET request to the Dog API, how to handle the response and the error, and how to update and render your state with React hooks. You also learned how to pass additional arguments the config.

You also learned how to test your API call with Postman, how to enter the URL, the method, the headers, and the parameters of your request, and how to see the response in JSON formats. You also learned how to use comments and explanations to understand the code better, and how to use markdown elements to present information in a visually appealing manner.

This article covered a lot of topics and concepts, but I hope you found it useful and interesting. If you have any questions, feedback, or suggestions, please leave a comment below. I would love to hear from you and help you with your queries. If you liked this article, please share it with your friends and colleagues, and don’t forget to follow me twitter @ionikdev and also on medium Damilola Esan for more articles like this. Thank you for reading! 😊

Relevant References:

1. Quick Start — React
2. TypeScript: JavaScript With Syntax For Types. (typescriptlang.org)
3. Getting Started | Vite (vitejs.dev)
4. Getting Started | Axios Docs (axios-http.com)
5. Dog API
6. What is Postman? Postman API Platform

In Plain English

Thank you for being a part of our community! Before you go:

• Be sure to clap and follow the writer! 👏
• You can find even more content at PlainEnglish.io 🚀
• Sign up for our free weekly newsletter. 🗞️
• Follow us: Twitter(X), LinkedIn, YouTube, Discord.
• Check out our other platforms: Stackademic, CoFeed, Venture.

Axios: A Simple and Effective Way to Make API Calls in React with TypeScript was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

Introduction

In the realm of web development, Next.js stands out as a robust framework renowned for its seamless server-side rendering (SSR) capabilities. It excels in serving pre-rendered content optimized for search engines and initial load performance, making it a game-changer in modern web application development.

However, even within the Next.js ecosystem, challenges emerge when delving into client-side data persistence, especially when leveraging localStorage. This versatile browser-based storage mechanism offers a convenient means of saving and retrieving data on the client-side. Yet, when you introduce Redux — a state management library celebrated for its predictability and global state management — complexities may arise.

You might wonder: Why does Redux state hydration become a concern when dealing with localStorage? To understand this, we must acknowledge a fundamental distinction between the server and the browser: the absence of localStorage in the server environment.

When a Next.js application initially renders on the server, it operates in a controlled environment where localStorage is inaccessible. This necessitates data retrieval from localStorage on the client-side, presenting a significant challenge — how to ensure Redux state consistency when the server-rendered page first loads.

In this article, we will delve into the concept of hydration in detail, elucidating its significance within the Next.js context. We’ll explore how Redux fits into this scenario and, most importantly, how to effectively resolve and manage Redux state hydration errors. By the end, you’ll possess a clear roadmap to navigate these intricacies and deliver a seamless user experience in your Next.js applications.

Understanding Hydration in the Context of Redux and localStorage

Before delving into the intricacies of resolving Redux state hydration issues when accessing data from localStorage in Next.js, let’s start with a fundamental concept: hydration.

Hydration is the process that bridges the gap between a server-rendered page and its transformation into an interactive client-side application. Think of it as the transition from a static webpage to a dynamic one.

When a Next.js application initially loads on the server, it pre-renders the page content to ensure a fast and SEO-friendly experience. However, this pre-rendered content is static, lacking the dynamic functionality associated with web applications.

Here’s where hydration comes into play. It’s the process of bringing that initial static page to life on the client-side. Hydration involves injecting JavaScript to add interactivity, enabling users to click buttons, submit forms, and experience all the dynamic features of your application.

Now, consider this in the context of our article. We’re delving into Redux state hydration, which means ensuring that the data managed by Redux, your global state manager, is properly rehydrated on the client-side. This becomes particularly crucial when dealing with data stored in localStorage.

In essence, Redux state hydration is the art of ensuring that when your Next.js application loads, the Redux state seamlessly adopts its previous state, without losing any essential data. It’s like reassembling all the puzzle pieces after transporting them from one place to another.

As we continue, keep this idea of hydration in mind. We’ll explore how to guarantee that your Redux state is effectively “refreshed” on the client-side, even when working with data from localStorage.

Initial Approach: Using localStorage with Redux in Client-Side Rendered Apps

In client-side-rendered applications built with tools like Vite or Create React App, a common requirement is to persist user-related data, ensuring it remains available even when users refresh the page. One way to achieve this is by utilizing the browser’s localStorage feature, a client-side storage solution.

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

interface User {
  id: number;
  firstname: string;
  lastname: string;
  email: string;
  phone: string;
}

interface AuthState {
  user: User | null;
  token: string | null;
}

let userFromLocalStorage;

userFromLocalStorage = localStorage.getItem("user");

const storedUser = userFromLocalStorage
  ? JSON.parse(userFromLocalStorage)
  : null;

const initialState: AuthState = {
  user: storedUser || null,
  token: localStorage.getItem("access_token") || null,
};

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    setUser: (state, action: PayloadAction<User | null>) => {
      state.user = action.payload;
      if (action.payload) {
        localStorage.setItem("user", JSON.stringify(action.payload));
      } else {
        localStorage.removeItem("user");
      }
    },
    setToken: (state, action: PayloadAction<string | null>) => {
      state.token = action.payload;
      if (action.payload) {
        localStorage.setItem("access_token", action.payload);
        console.log("Token set in local storage:", action.payload);
      } else {
        localStorage.removeItem("access_token");
      }
    },
  },
});

export const { setUser, setToken } = authSlice.actions;

export default authSlice.reducer;

Now, when it comes to integrating localStorage with Redux, the initial approach appears straightforward. However, it’s crucial to understand that this method is tailored for client-side rendering (CSR) applications, where the entire application runs in the browser. In CSR apps, there’s no need to worry about the server-side environment because everything is managed in the browser.

In the provided code snippet, we begin by defining two vital interfaces: User and AuthState. These interfaces are used to structure our Redux store, with User representing user-related data, and AuthState containing various authentication-related properties.

This initial approach works seamlessly in CSR applications, allowing you to store and access data from localStorage without any issues. However, the story changes when you introduce server-side rendering (SSR) frameworks like Next.js into the mix.

In SSR environments, such as Next.js, a new challenge arises because the server, during the initial page render, doesn’t have access to the browser’s localStorage. It’s a client-side resource that doesn’t exist on the server.

This distinction becomes critical, as we’ll soon discover, because it leads to unexpected hydration errors when the server-rendered page transitions to the client-side. The next part of this article will delve into the specifics of why these errors occur and, more importantly, how to effectively address them while continuing to leverage localStorage within a Next.js application.

Understanding Hydration Errors: Why They Occur

These errors may manifest for various reasons, often related to the intricate balance between server-side rendering and client-side interactivity.

According to the official documentation, there are several common scenarios where hydration errors can arise.

In the context of this article, we are primarily concerned with “Using browser-only APIs like Window or localStorage in your rendering logic.” This is where the interaction with localStorage becomes crucial, and potential hydration issues arise.

For a visual representation of the kind of hydration error you may encounter when using localStorage.

Now, let’s proceed to explore how to effectively handle these hydration errors in the context of localStorage within your Next.js application.

Solving Hydration Errors: Using useEffect and AuthInitializer Component

Now that we’ve identified the hydration error challenges associated with localStorage in server-side-rendered (SSR) frameworks like Next.js, let’s explore an effective solution. Our goal is to ensure that Redux state synchronization with localStorage occurs flawlessly.

To address this, we’ll utilize the power of React’s useEffect hook, a tool designed for handling side effects in functional components. However, we encounter a constraint – hooks, including useEffect, must be invoked inside functions that adhere to the rules of React hooks. Unfortunately, this rule prohibits us from using useEffect directly within our Redux authSlice.

So, how do we work around this limitation? The answer lies in creating a separate component, which we’ll call AuthInitializer. This component will serve as our gateway to effectively manage the synchronization of localStorage data with Redux.

Here’s how it works:

Step 1: Set Initial State to null in authSlice

In our authSlice.ts, we initialize the state as null. This ensures that Redux starts with an empty state when the app initially loads, avoiding unnecessary conflicts during server-side rendering.

const initialState: AuthState = {
  user: null,
  token: null,
  };

Step 2: Create the AuthInitializer Component

In a separate file, AuthInitializer.tsx , we create the AuthInitializer component. This component leverages useEffect to run client-side code for initializing Redux state.

import React, { ReactNode, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "./store/store";
import { setToken, setUser } from "./slices/authSlice";
import { User } from "./types";

interface AuthInitializerProps {
  children: ReactNode;
}

const AuthInitializer: React.FC<AuthInitializerProps> = ({ children }) => {
  const dispatch = useDispatch();

  useEffect(() => {
    if (typeof window !== "undefined") {
      const userFromLocalStorage = localStorage.getItem("user");
      const tokenFromLocalStorage = localStorage.getItem("access_token");

      if (userFromLocalStorage) {
        dispatch(setUser(JSON.parse(userFromLocalStorage) as User));
      }

      if (tokenFromLocalStorage) {
        dispatch(setToken(tokenFromLocalStorage));
      }
    }
  }, [dispatch]);

  return children;
};

export default AuthInitializer;

Step 3: Implement AuthInitializer

Finally, in your main application, wrap your components with the AuthInitializer component. This ensures that the useEffect within AuthInitializer runs when your application initializes, effectively synchronizing Redux state with localStorage on the client-side.

import AuthInitializer from "./AuthInitializer";

function App() {
  return (
    <AuthInitializer>
      {/* Your app components */}
    </AuthInitializer>
  );
}

By following this approach, we maintain compatibility with server-side rendering while effectively managing the synchronization of Redux state with localStorage on the client-side. This helps in eliminating the hydration errors you may encounter when accessing localStorage within a Next.js application.

Conclusion

In the realm of web development, challenges are an inherent part of the journey. Throughout this article, we’ve embarked on a guided exploration of the intricacies surrounding Redux state hydration in Next.js, especially when working with localStorage.

By harnessing the power of React’s useEffect and introducing the AuthInitializer component, we’ve orchestrated a seamless synchronization of data between server and client, achieving the coveted goal of data persistence. This approach elegantly unites server-side rendering (SSR) with client-side interactivity, emblematic of modern web development’s essence.

Our journey doesn’t end here. To stay updated and continue learning, follow me on Twitter and delve deeper into web development topics on Medium.

Follow me on Twitter: @ionikdev

Read more on Medium: Damilola Esan

Thank you for accompanying me on this voyage to mastering Redux state hydration in Next.js. Together, we’ve overcome challenges to craft remarkable web applications.

Relevant References:

1. Text content does not match server-rendered HTML | Next.js (nextjs.org)
2. hydrate — React
3. Building Your Application: Caching | Next.js (nextjs.org)

As a programmer, it is essential to have a good command over Git and version control tools to efficiently manage and track your projects. Although some Git commands are frequently used, there are several other commands that can come in handy while working on projects. This article aims to provide an overview of essential Git commands that every programmer should know to ensure the production of high-quality code, so let’s dive in.

1. git config:

This command sets the configuration values of the project, such as the username, email, file formats, and more.

Example:

git config --global user.name "John Doe"
git config --global user.email johndoe@example.com

2. git init:

This command is used to initialize a project as a Git repository.

Example:

mkdir my-project
cd my-project
git init

3. git remote add origin <link-to-github-remote-repo>:

This command is used to add or connect to a remote repository.

Example:

git remote add origin https://github.com/username/project.git

4. git status:

This command is used to track the status of files in your local repository, such as whether they are tracked, untracked, or modified.

Example:

git status

5. git clone <link-to-github-remote-repo>:

This command is used for downloading existing source code from a remote repository, such as GitHub.

Example:

git clone https://github.com/username/project.git

6. git remote :

This command is used to view connected remote repositories.

Example:

git remote -v

7. git add <file name>

is a command that adds changes to files to the staging area, so that they can be included in the next commit.

git add index.html

git add index.html style.css page.js

git add .

is used to stage all changes in the current directory and its subdirectories for the next commit.

git add .

8. git rm -r — cached <fileName>:

This command is used to remove a file from the remote repository(GitHub) without deleting it in your local repository.

Example:

git rm -r --cached index.html

9. git commit -m < commit message >

This command is used to commit staged files and provide a commit message for the commit history.

git commit -m "Add index.html"

10. git push -u origin <branch-name>

This command is used to push committed files to the remote repository (GitHub) in the specified branch. Use this command for the very first time you push files to the remote repository. It will establish where you are pushing these files to. The next time(s) you push files, you can use git push

git push origin master

git push

This command is used to push committed files to the remote repository. You can only use this command to push files to the remote repository AFTER having pushed files using the previous command.

git push

11. git fetch:

This command is used to fetch the most updated version of your local repository.

git fetch

12. git pull

This command is used to take that information you just fetched and pull it into your local repository. This updates your local repository to the most updated version of your remote repository.

git pull

13. git branch

This command is used to preview the branch you are currently on

git branch

git branch <branch-name>:

This command is used to create a branch in your local repository.

git branch feature

git branch -d <branch-name>:

This command is used to delete a branch in your local repository.

git branch -d feature

14. git checkout — track/<branch name>:

This command is used to switch to a branch that was created in the remote repository for the first time.

git checkout --track origin/feature

git checkout <branch name>:

This command is used to switch to a branch you have already visited before.

git checkout feature

15. git merge <branch name>:

This command is used to merge two branches together. To do this, enter the branch that you want to inherit the changes. And the branch name you would use along with this command is the branch that will provide the changes.

git merge container

16. git merge — abort:

This command is used to abort a merge if there are conflicts.

git merge --abort

17. git merge -X theirs <branch name>:

This command is used to merge two branches together. And if there are merging conflicts, this command will just assume that you’d prefer the changes made in the mentioned branch (rather than the current one).

git merge -X theirs feature

18. git reset — hard HEAD

This command will erase all the changes you’ve made in your local repository and update it to the latest version that was committed to GitHub.

git reset --hard HEAD

19. git clean -f

This command is used to delete untracked files in your local repository.

git clean -f

20. git clean -d

This command is used to delete untracked directories in your local repository. You can also combine it into git clean -fd to do both.

git clean -d

21. git log

The git log command is used to view the commit history of a git repository, showing the latest commit first. You can use various options with git log to display different aspects of the commit history, such as author, date, commit message, and more.

git log

In conclusion, Git is a powerful tool for version control and is a must-have for any programmer. By mastering these 21 essential Git commands, you can streamline your workflow, collaborate effectively, and produce high-quality code. Don’t be afraid to experiment and learn more about Git, as there are many other commands and features that can take your development skills to the next level. Follow me on Medium and Twitter Damilola Esan for more articles like this, and happy coding!

Introduction

Starting a career in web development can be an exciting and daunting prospect. The technology industry is filled with complex terminology that can leave newcomers feeling confused and unsure of where to start. However, the fundamental concepts behind these terms are often straightforward and accessible to everyone. In this article, we will outline the key considerations you need to keep in mind as you embark on your journey to becoming a web developer. From understanding the basics of the internet to mastering different string cases and more, this article will help you start your web development journey on the right foot. So, let’s dive in!

1. Internet

• URL: A Uniform Resource Locator is a specific address used to locate a webpage or file on the internet, such as "https://www.example.com".

• HTTP: Hypertext Transfer Protocol is the foundation of the World Wide Web and is used for transferring data over the internet.

• HTTPS: Hypertext Transfer Protocol Secure is an extension of HTTP that adds an extra layer of security by encrypting data transferred between a website and a user's browser.

• Web browser: A software application that enables users to access and navigate the World Wide Web, including popular options like Chrome, Firefox, Safari, and Edge.

• Web server: A software that receives and handles client requests and sends back responses, such as HTML pages, files, or data. Examples of web servers include Apache and Nginx.

• IP address: Each device connected to a computer network using the Internet Protocol for communication is assigned a unique numerical label known as an IP address.

• DNS: The Domain Name System is a system that translates domain names like "www.example.com" into IP addresses, making it easier for users to access websites using human-readable names instead of IP addresses.

• Cookies: Small text files that are stored on a user's computer by a web server and contain information such as login status or preferences, which can be accessed by the server on subsequent visits to the same website.

• Cache: A temporary storage area that holds frequently accessed data, such as images or videos, to improve the performance and responsiveness of a website. This storage area can be located on either a user's computer or on a server.

• Search Engine: Software that searches and indexes the internet and returns the results of the search query to the users. Popular search engines include Google, Bing, Yahoo, and DuckDuckGo.

2. Web Development

When it comes to web development, there are a variety of concepts and technologies to familiarize yourself with. Some key areas to explore include:

• Front-end: This aspect of web development focuses on the user interface and user experience, encompassing the layout, design, and interactivity of a website or web application. Front-end developers often work with technologies such as HTML, CSS, and JavaScript to create responsive and engaging experiences for users.

• Back-end: The back-end of a website or web application encompasses the server-side logic and database management necessary to handle user requests and store data. Back-end developers may work with languages like PHP, Ruby, Python, or Java, as well as frameworks like Node.js or Django.

• Full-stack: Developers who are proficient in both front-end and back-end development are often referred to as "full-stack" developers, able to build and maintain all aspects of a web project.

• Responsive design: With the proliferation of mobile devices and varying screen sizes, responsive design has become an essential aspect of web development. This involves designing and developing websites that can adapt to different devices' screen sizes and resolutions, providing a consistent and user-friendly experience.

• CMS: A Content Management System is a software application that allows users to create, manage, and publish digital content, such as text, images, and videos, without needing technical expertise. Common CMS platforms include WordPress, Drupal, and Joomla.

• SEO: Search Engine Optimization involves optimizing a website to improve its visibility and ranking in search engine results pages. This includes factors like site structure, keyword research, and content creation.

• Framework/libraries: Frameworks and libraries are pre-written code collections that offer a foundation for building web applications and streamline repetitive tasks such as user input handling and server requests. Popular frameworks and libraries include React, Angular, and Vue.js. By using these tools, web developers can save time and improve the overall quality of their code.

• API endpoint: An API endpoint is the location of a web service or server that can be accessed by a client to retrieve or update data. This is often accomplished using HTTP requests and response formats like JSON.

• CDN: Content Delivery Networks are networks of servers distributed worldwide that cache and serve content, such as images, videos, and scripts, to users based on their location. This can improve website performance and reduce server load.

• DOM: The Document Object Model is a tree-like representation of an HTML or XML document, which can be manipulated using JavaScript to change a website’s layout, content, and style.

• AJAX: Asynchronous JavaScript and XML is a technique for making asynchronous HTTP requests and updating parts of a webpage without reloading the whole page. This can provide a more seamless and responsive user experience.

• ES6: ECMAScript 6 is the sixth version of the ECMAScript standard for JavaScript, which introduced new features such as arrow functions, template literals, and destructuring assignments. These can help make JavaScript code more concise and expressive.

• Transpiling: Transpiling is the process of converting code written in one programming language, such as ES6, into another language that is more widely supported, such as ES5. This can help ensure code compatibility across different environments and browsers.

• Linting: Linting refers to the automatic checking of code for potential errors or style issues, providing suggestions to fix them. This can help improve code quality and maintainability. Popular linters for JavaScript include ESLint and JSLint.

3. Software Programming

• Bug: An error or defect in a program that causes it to produce unexpected or incorrect results.

• Code refactoring: The process of restructuring existing computer code without changing its external behavior.

• Debugging: The process of identifying and fixing errors in a program.

• Object-Oriented Programming (OOP): A programming paradigm based on the concept of "objects," which can contain data and code that manipulates that data.

• Function: A block of code that can be called by other parts of a program to perform a specific task.

• Variable: A named location in a computer's memory that stores a value that can be changed during the execution of a program.

• Algorithm: A set of instructions or steps to solve a problem or accomplish a task.

• API: An application programming interface that provides a set of rules and protocols for building and interacting with software applications.

• Compiler: A program that converts code written in a high-level programming language into machine code that a computer can execute.

• Syntax: The set of rules that govern the structure of a programming language.

• Library: A collection of pre-written code that can be used to perform common tasks, such as input/output, graphics, and data manipulation, in a program.

4. String Cases

• Upper case: When all letters in a string are capitalized.

• Lower case: When all letters in a string are in small letters.

• Title case: When the first letter of each word in a string is capitalized while the rest are lowercase.

• Camel case: When the first word in a string is in lowercase, and subsequent words are capitalized, with no spaces or punctuation between them.

• Snake case: When underscores separate words in a string, and all the letters are in lowercase.

• Pascal case: Similar to camel case, but the first letter of the first word is also uppercase.

• Kebab-case: When hyphens separate words in a string, and all letters are in lowercase.

• Constant case: When all letters in a string are in uppercase and separated by an underscore.

• Train-case: Similar to kebab-case, but the first letter of each word is capitalized. For example, the string "Hello-World" is in Train-case.

Conclusion

Web development can seem overwhelming at first, but by familiarizing yourself with the fundamental concepts, you can start your journey with confidence. Understanding the basics of the internet, the front-end and back-end of web development, responsive design, and different technologies like JavaScript frameworks, APIs, and CDNs is essential to creating successful websites and web applications. Additionally, being familiar with string cases, linting, and transpiling can help you write clean, concise, and maintainable code. Keep these concepts in mind as you learn and practice web development, and don’t forget to stay up-to-date with the latest trends and technologies. Following me here on Medium and on Twitter : Damilola Esan for more article about web development and Technologies in general. Thank you for reading and Good luck on your journey!

Introduction:

As we navigate through life, we encounter people who significantly contribute to our personal and professional development. They challenge us to step outside our comfort zones, inspire us to take on new challenges, and offer invaluable guidance. In this article, we will discuss the significance of acknowledging and valuing those who have aided us in becoming the best possible versions of ourselves.

● The Impact of Mentors on Personal and Professional Growth

Reflecting on my personal and professional growth journeys, I’ve come to realize the importance of recognizing and appreciating the people who have had a significant impact on my life. One such individual is my friend and mentor, Justice Ekemezie , whose guidance and support have been invaluable. Justice Ekemezie encouraged me to step out of my comfort zone and learn new skills, such as React, and provided technical support and career advice that helped me develop both technical and interpersonal skills. His positive attitude and willingness to help others inspired me to pay it forward and support others in their growth journeys.

It’s easy to underestimate the impact that certain people have on our lives, whether they are our college professors, mentors, friends, or anyone else. But by taking a moment to reflect and show gratitude for those who have helped us become the best version of ourselves, we can better appreciation what they have done for us. Justice Ekemezie has made a significant impact on my life, and I’m grateful for his guidance and support along the way.

● Embracing New Opportunities for Personal and Professional Growth

When a friend suggested I learn a new skill to advance my career, I initially dismissed it. But I soon realized that learning new skills was crucial to remain relevant in my field. Despite facing challenges like distractions at home and unreliable electricity, I took a risk and moved to a new environment to learn and grow. Surrounding myself with others who were coding every day provided a supportive and inspiring atmosphere that motivated me to push myself harder.

This experience taught me the importance of being open to new opportunities and taking risks. Sometimes it takes stepping outside of our comfort zones to achieve personal and professional growth.

● Embrace Feedback for Continuous Improvement

Receiving feedback, whether positive or negative, is crucial for personal and professional growth. It can be difficult to accept criticism, but it’s an essential step in developing our skills and improving our work. During my journey of learning and growth, I learned the importance of being open to feedback from various sources, including mentors, colleagues, peers, and clients. Taking Justice Ekemezie feedback into account and making necessary improvements helped me progress and become better at what I do. Incorporating feedback into our work can be a continuous process, and we should strive to seek it out regularly to help us continuously improve.

● Document Your Progress to Stay Accountable

Keeping track of your progress is essential for learning and growth. By documenting your progress, you can celebrate your successes, learn from your failures, and keep track of your growth over time. It’s important to hold yourself accountable for your progress and use it as motivation to keep moving forward. There are various ways to document your progress, such as keeping a journal, a to-do list, or a project management tool. You can also share your progress with a mentor, teacher, or colleague to receive feedback and guidance, which can further enhance your growth and development. So, make sure to document your progress and use it as a valuable tool for personal and professional development.

● Paying It Forward: Fostering a Culture of Learning and Growth

One of the most important lessons I learned during my journey of learning and growth was the value of paying it forward. After receiving support and guidance from Justice Ekemezie , I realized the importance of helping others who are also on their own journey. By sharing my experiences, offering advice, and mentoring others, I can contribute to their growth and development.

Paying it forward not only benefits others but also reinforces my own learning. When I share my knowledge with others, I am forced to think more deeply about what I have learned and how I can apply it to help someone else. Additionally, it helps to create a culture of learning and growth, where everyone is encouraged to share their knowledge and support each other.

By paying it forward, we can create a ripple effect of growth and development that can benefit not only individuals but also entire organizations and communities.

In conclusion, I want to express my sincere gratitude to everyone who has contributed to my personal and professional growth journey. Without their help, I would not be where I am today. They pushed me out of my comfort zone and encouraged me to learn new skills, provided technical support and career advice, and inspired me to pay it forward and help others in their growth journeys.

But don’t stop there! Take action and reach out to those who have supported you. Thank them for their help and let them know how much it has meant to you. And just as importantly, be the one to support others in their growth journeys. Whether it’s through mentorship, providing technical support, or simply offering a listening ear, your actions can make a big difference.

Embracing new opportunities for learning and growth, being open to feedback, documenting your progress, and paying it forward can help you and others achieve your goals and contribute to a culture of learning and growth. Let’s continue to support each other and strive for continuous improvement and development. Together, we can create a world where everyone has the opportunity to reach their full potential.

I hope this article has inspired you to reflect on your own journey and appreciate the people who have helped you become the best version of yourself. If you found this article helpful, I invite you to follow me on Medium and Twitter: Damilola Esan to receive more tips and insights on personal and professional growth and Tech in general. Thank you for reading.

Introduction:

In this article, I want to share my story, with all the highs and lows, and offer some tips on things to consider doing and things to avoid as you break into the tech world. I hope my experience can inspire and guide you on your own journey to success.

Breaking into the tech industry can be a wild ride, and for me, it all started with a push from my vice principal in secondary school. She challenged me to build a website for the school. I had no experience in coding and felt intimidated and pressured. But I took on the challenge and formed a team with my friends. We were all beginners, fueled by the desire to impress our vice principal and the promise of 30,000 naira (which was a lot of money in my teenage years!).

Our journey was filled with challenges, frustration, and a lot of head-scratching moments. I remember when my image wouldn't display on the website for a whole week, and I was ready to give up. But we persevered and ultimately succeeded in building a website for the school. When we got paid for our hard work, it was a proud moment for us all.

• Map Your Journey in Tech

Becoming a tech professional can be a journey that starts from unexpected places. For some, it's a lifelong passion, while for others, it's a matter of circumstance. In my case, it was the latter.

When I started, I had no real interest in coding. I only did it for the challenge and the money. After completing the website for the school, people started calling me a programmer, and I enjoyed the attention. But deep down, I knew I was lying to myself and others about my skills.

It took me three years to realize that honesty and self-awareness are essential traits in any profession. It's better to be honest with yourself and others about your skills and knowledge, rather than pretending to be something you're not. By acknowledging my weaknesses, I was able to take the necessary steps to improve my skills and achieve my goals.

• Learn From Your Mistakes

Making mistakes is part of the journey, especially in the tech industry. I made the mistake of lying about my skills, and it cost me time and opportunities. But I learned from that mistake and made a commitment to learn and improve my skills.

When you make a mistake, don't beat yourself up about it. Instead, take the opportunity to learn from it and do better next time. Use the experience to grow and improve yourself, both personally and professionally.

• Build Your Network

Building a network is essential in any industry, and the tech industry is no different. Attend networking events, join online communities, and connect with people who share your interests and passions. You never know who you might meet, and how they might help you in your career.

• Gain experience:

Experience is crucial in the tech industry, and there are many ways to gain it. Consider internships, apprenticeships, freelancing, or volunteering in tech-related projects. Building a portfolio of work can also be helpful in showcasing your skills and experience to potential employers.

• Develop a strong skillset

In addition to technical skills, soft skills such as communication, problem-solving, and teamwork are also important in the tech industry. Continuously work on improving your skills and seek out opportunities to learn new technologies and tools.

• Be adaptable

The tech industry is constantly evolving, and it's important to be adaptable and open to change. Be willing to learn new technologies and adapt to new roles or responsibilities as needed.

Conclusion:

Breaking into the tech industry can be an exciting and challenging journey. My own journey began with a push from my vice principal to build a website for my school, and it ultimately led me to discover my passion for coding. As you embark on your own journey, remember to stay curious, persistent, and open to new opportunities.

Honesty and self-awareness are also crucial traits to cultivate as you pursue a career in tech. Be honest with yourself and others about your skills and knowledge, and don't be afraid to seek out help and guidance from mentors, colleagues, and online resources. And, as you gain more experience and skills, be sure to pay it forward by helping others in the industry.

Finally, remember that employers value employees who are not only skilled but also willing to learn and grow. Demonstrate your willingness to learn and your commitment to personal and professional growth, and you’ll be well on your way to achieving success in the tech industry. With hard work, determination, and a commitment to lifelong learning, anything is possible.

Thank you for reading my article on breaking into the tech industry. I hope you found it helpful and inspiring. If you’d like to stay up-to-date on my future articles, tutorials, and professional experiences, I invite you to follow me here on Medium and Twitter: https://twitter.com/adekunle876?t=uwnEStd6RFR0Fne3psdkXQ&s=09. I’m committed to giving back to the community that has helped me grow as a developer and sharing my journey with others. Thank you again for your support and I look forward to connecting with you!