DEV Community: Hammad Afzal

Building Your Own Custom Hook in React: A Simple Guide to Fetching Data

Hammad Afzal — Mon, 23 Sep 2024 11:36:14 +0000

1. Introduction

When working with React, managing state and side effects — like fetching data — can get repetitive, especially if you have similar logic in multiple components. This is where custom hooks come in handy. They allow you to bundle reusable logic into a single function, making your code cleaner and easier to manage.

In this blog, we’ll create a custom hook called useCountrythat fetches information about countries from an API. We’ll break down each step to ensure you can easily follow along.

2. What is a React Hook?

Before we jump into custom hooks, let’s quickly review some built-in hooks in React:

useState: Think of this as a container that holds information that can change over time, like user input in a form.
useEffect: This is like a timer that tells React to perform a certain action after something happens, such as fetching data from a server.

A Quick Example

Imagine you’re building a simple form. You’d use useStateto keep track of the input values (like a shopping list) and useEffectto trigger actions when those values change (like updating the list).

These built-in hooks are the building blocks for creating custom hooks, which let you reuse logic across different components.

3. Step-by-Step Guide to Building the Custom Hook

Step 1: Define the Purpose of Your Hook

We’re going to create a custom hook called useCountry, which will fetch country details based on the name you provide. It will handle loading states and any errors that may occur.

Challenge: Think of another use case for a custom hook. What kind of data would you like to fetch?

Step 2: Initial Setup

We’ll use **Axios **to make our API calls. Axios simplifies the process of sending requests and gives better error messages compared to the Fetch API.

Here’s a basic outline of our custom hook:

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

function useCountry(countryName) {
  const [data, setData] = useState(null); // Holds fetched country data
  const [loading, setLoading] = useState(true); // Tracks loading state
  const [error, setError] = useState(null); // Tracks errors

  useEffect(() => {
    if (!countryName) return; // If countryName is empty, exit early

    const fetchCountry = async () => {
      setLoading(true); // Start loading
      try {
        const response = await axios.get(`https://restcountries.com/v3.1/name/${countryName}`);
        setData(response.data[0]); // Set country data
      } catch (err) {
        setError(err.response ? err.response.data.message : err.message); // Handle errors
      } finally {
        setLoading(false); // End loading
      }
    };

    fetchCountry(); // Call the function to fetch data
  }, [countryName]); // Re-run if countryName changes

  return { data, loading, error }; // Return state
}

export default useCountry;

Key points:

Axios automatically converts JSON responses, so you don’t have to do it manually.
It provides better error messages, making debugging easier.

Try It Yourself: Copy the code into your editor and change the country name to see different results!

Step 3: Handle Edge Cases

It’s essential to manage edge cases — like when the country name is invalid or empty. Here’s how we can enhance our hook:

useEffect(() => {
  if (!countryName) {
    setError('Country name is required'); // Set error if no input
    setLoading(false);
    return; // Exit if country name is empty
  }

  const fetchCountry = async () => {
    setLoading(true);
    try {
      const response = await axios.get(`https://restcountries.com/v3.1/name/${countryName}`);
      setData(response.data[0]);
    } catch (err) {
      setError(err.response ? err.response.data.message : err.message);
    } finally {
      setLoading(false);
    }
  };

  fetchCountry();
}, [countryName]);

Example Scenarios:

Invalid Country Name: If you input “Atlantis,” the API will return a 404 error, which we can catch and display.
Empty Input: If the input is empty, we show an error message indicating that a country name is required.

Step 4: Using the Custom Hook in a Component

Now that we have our useCountry hook, let’s use it in a component to fetch and show country details.

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

const CountryInfo = () => {
  const [country, setCountry] = useState(''); // State for country input
  const { data, loading, error } = useCountry(country); // Use custom hook

  const handleInputChange = (e) => {
    setCountry(e.target.value); // Update country state
  };

  return (
    <div>
      <input
        type="text"
        value={country}
        onChange={handleInputChange}
        placeholder="Enter country name"
      />
      {loading && <p>Loading...</p>} // Show loading message
      {error && <p>Error: {error}</p>} // Show error message
      {data && (
        <div>
          <h2>{data.name.common}</h2>
          <p>Population: {data.population}</p>
          <p>Region: {data.region}</p>
        </div>
      )}
    </div>
  );
};

export default CountryInfo;

User Interaction

When a user types “Pakistan” into the input field, our component will fetch and display the country details.

Try It Yourself: Create an input field using the CountryInfocomponent. What happens when you enter different country names?

4. Best Practices for Custom Hooks

Naming Conventions: Always start your custom hook with “use,” like useCountry. This helps clarify that it follows React's hook rules.
Reusability: Make sure your hook is versatile enough to be used in multiple components. For example, a hook for form handling can work with different forms.
Handling Side Effects: Always use useEffectfor side effects (like API calls) within your hook. This keeps your components focused on their primary job.
Example: How could you modify useCountryto include a search history? Share your ideas!

5. When Not to Use Custom Hooks

Custom hooks are great, but they’re not always needed. Here are times when they might not be the best choice:

Single-Use Logic: If the logic is specific to one component and won’t be reused, there’s no need to create a custom hook.
Simple State Management: If managing state is straightforward (like a toggle switch), making a custom hook could complicate things.

Reflection: Think about recent projects. Have you created any logic that might benefit from being turned into a custom hook? Share your thoughts!

6. Conclusion

Custom hooks in React help you manage state and side effects while keeping your components clean and reusable. We’ve shown how to build a custom hook using Axiosto fetch country details, manage loading and error states, and handle edge cases.

By using custom hooks, you can make your code more organized and maintainable. Start creating your own custom hooks for tasks like data fetching or form handling!

Final Challenge

Try creating your own custom hook for a different purpose, such as fetching weather data. Can you build it? If not, feel free to revisit this material for a deeper understanding.

Deploy Your Node.js TypeScript App on Vercel Quickly and Efficiently: A Step-by-Step Guide

Hammad Afzal — Mon, 02 Sep 2024 10:09:39 +0000

Deploying a Node.js app with TypeScript on Vercel can be quick and straightforward — if you set it up correctly. Vercel offers seamless deployment with powerful CI/CD capabilities, making it ideal for modern web applications. This guide will help you navigate the setup process, sidestep common configuration errors, and ensure your deployment is successful.

1. Prerequisites

Before getting started, make sure you have the following:

Vercel Free Account: Sign up here to get started and deploy your apps effortlessly..
Node.js & NPM: Install Node.js if you haven’t already. This will also install npm, essential for running JavaScript packages..
API Setup: Have an existing API ready, or create a simple one.. Check out my reference repository for a quick setup guide that gets you up and running in minutes.

2. Setting Up Your Project

Let’s start by setting up a basic Node.js project with TypeScript.

Step 1: Initialize Your Project

npm init

Step 2: Install Key Packages

Install the essential packages for TypeScript and Node.js development:

npm install express typescript ts-node @types/node @types/express
ts-node-dev

express: Minimalist web framework for Node.js, used to set up routing and middleware.
typescript: Superset of JavaScript that adds static typing, enhancing code quality and catching errors early.
ts-node-dev: Runs TypeScript files with hot-reloading, streamlining the development process.

3. Configure TypeScript (tsconfig.json)

The tsconfig.json file controls how TypeScript compiles your code. Here’s a recommended configuration:

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "target": "ES6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "*": [
        "node_modules/*",
        "src/types/*"
      ]
    }
  },
  "include": [
    "./src/**/*"
  ]
}

Key Configurations Explained:

"module": "commonjs": Ensures compatibility with Node.js.
"target": "ES6": Compiles code to ES6 standards, allowing modern JavaScript features.
"outDir": "dist": Specifies the output folder for compiled files, crucial for Vercel deployments.
"paths": Helps alias directories, making imports cleaner and the codebase more maintainable.

4. Set Up Scripts in package.json

Next, configure scripts in your package.json to manage development, build, and deployment workflows effectively:

"scripts": {
  "start": "npx nodemon src/index.ts",
  "dev": "npx nodemon src/index.ts",
  "build:ui": "@powershell Remove-Item -Recurse -Force dist && cd ../frontend && npm run build && @powershell Copy-Item -Recurse dist ../backend",
  "lint": "eslint ."
}

Scripts Overview:

start: Runs the app in development mode with live reloading using nodemon.
build:ui: Cleans the dist directory, builds the frontend, and copies static files to the backend. This is particularly useful for monorepo setups.
lint: Uses ESLint to maintain code quality and consistency by identifying problematic patterns in JavaScript.

5. Vercel Deployment Configuration

Deploying to Vercel requires a vercel.json file to define your build and route configurations. Here's a basic setup:

{
  "version": 2,
  "builds": [
    {
      "src": "dist/index.js",
      "use": "@vercel/node",
      "config": { "includeFiles": ["dist/**"] }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "dist/index.js"
    }
  ]
}

Configuration Highlights:

Builds: Specifies the entry point (dist/index.js) and includes necessary files.
Routes: Directs all incoming requests to the main file and handles CORS, which is crucial for cross-origin requests.

6. Common Deployment Issues & Fixes

Deployments often run into a few common issues. Here’s how to tackle them:

Build Failures: Make sure your dist folder is generated correctly. Double-check file paths in vercel.json to ensure all required files are included.
CORS Errors: Modify CORS headers in vercel.json to suit your API’s specific needs, ensuring smooth communication between the frontend and backend.
Missing Dependencies: Verify all dependencies in package.json are installed correctly and up-to-date to prevent build breaks.

7. Conclusion

Deploying a TypeScript-based Node.js app on Vercel can be smooth and efficient with the right configurations. Focus on setting up your tsconfig.json, package.json, and vercel.json accurately to streamline the process. If you need a complete example or further tweaks, feel free to explore my complete codebase here for further reference and tweak the configurations as needed.

Next Steps: Test these configurations locally before deploying to ensure everything works as expected. Follow me for more guides, and don’t hesitate to share your deployment experiences or ask questions!

Happy coding and deploying on Vercel! 🍻