Forem: Rahul Khatri

Custom hooks in React

Rahul Khatri — Mon, 17 Apr 2023 18:56:47 +0000

Hey👋 Devs,

Before get into the topic let's understand what is hooks in React.

Hooks allow to use state and other React features in functional components, making them more powerful and flexible.
There's already one general hook, useState that an array and the first element of an array is value and second one is a function to update the value.

const [toggle, setToggle] = useState(false)

In above snippet, useState takes initial value false as an argument and returning an array, here is toggle vale and the setToggle is a function that update the toggle.

useState hook has there own logic to provide these value in more efficient way.

What is Custom Hook?

A Custom Hook is a function that allows to extract logic from a component and reuse it across multiple components.

Custom Hooks start with the word "use" and can use other Hooks, such as useState and useEffect, to create the logic that our want to extract from our components.

Here's a simple example, we use toggles a lot on the web, so this would be the logic to handle them

const MyComponent = () => {
  const [toggle, setToggle] = useState(false);

  const handleToggle = () => {
    setToggle(!toggle);
  };

  return <button onClick={handleToggle}>Toggle {toggle ? "Off" : "On"}</button>;
};

As you can see, we define a toggle state and a handle function to update the toggle. This code pattern will also apply if we have multiple toggles in the same project.

Now here Custom Hook come into the picture

import { useState } from "react";

const useToggle = (initialValue) => {
  const [toggle, setToggle] = useState(initialValue);

  const handleToggle = () => {
    setToggle(!toggle);
  };

  return [toggle, handleToggle];
};

// import useToggle hook 

const MyComponent = () => {
  const [toggle, handleToggle] = useToggle(false);

  return <button onClick={handleToggle}>Toggle {toggle ? "Off" : "On"}</button>;
};

The useToggle hook contain the logic we defined in MyComponent component and the interesting thing is that we can reuse this logic in every component with the help of hook.

Let have look on another example

When fetching data from an API we generally use state for loading, error and data. Here's what it would look like

import { useState, useEffect } from "react";

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/todos"
        );
        const data = await response.json();
        setData(data);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) {
    return <Loader />;
  }

  if (error) {
    return <div>{error.message}</div>;
  }

  return <div>{/* render data */}</div>;
};

In the above example, we defined states for data, loading, and error and used the useEffect hook to get data from the API. We know that's a general pattern to get data from any API. Instead of writing all this stuff in every component, make a hook for this pattern (logic) so every component can fetch data api without writing anything new

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const data = await response.json();
        setData(data);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

The useFetch hook takes in a url parameter and returns an object with three states: data, loading, and error.

The useEffect hook is used to fetch the data from the specified url using the fetch() API. If the fetch is successful, the data state is updated with the fetched data, and loading is set to false. If there's an error, the error state is set to the error object, and loading is set to false.

The useFetch hook can be used in a component like this:

// import useFetch hook

function MyComponent() {
  const { data, loading, error } = useFetch("https://jsonplaceholder.typicode.com/todos");

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>{error.message}</p>;
  }

  return <div>{/* render data */}</div>;
}

In this example, the MyComponent component uses the useFetch hook to fetch data from the specified URL. It checks the loading and error states to determine what to render while waiting for the data to load. Once the data is available, it can be rendered as desired.

Benefits of Custom Hooks

First, they allow you to extract logic from your components and reuse it across multiple components, reducing the amount of code you need to write. This makes your code more readable and maintainable.
Second, Custom Hooks allow you to separate concerns and create more modular code. By extracting logic into Custom Hooks, you can focus on the specific functionality of each component and avoid duplicating code across multiple components.
Finally, Custom Hooks allow you to create reusable code that can be shared across multiple projects. By creating Custom Hooks that encapsulate specific functionality, you can build a library of reusable components that can be used across different projects. This saves time and reduces the amount of code you need to write.

Conclusion

In conclusion, Custom Hooks are a powerful tool in React that allow you to extract logic from your components and reuse it across multiple components. By using Custom Hooks, you can create more readable and maintainable code, reduce the amount of code you need to write, and create reusable code that can be shared across multiple projects.

Did you create any Custom Hook in react? Let me know in comment👇🏻

How to use Code Splitting in ReactJS

Rahul Khatri — Tue, 09 Aug 2022 17:02:05 +0000

Hey Devs👋

We all know that the ReactJS is very popular library in web application. We create a project small, medium and large size app. As our app grow the bundle of that app grow too. And especially when we use some third party modules. Which will accidentally make it so large that your app takes a long time to load. How fast user can interact with our app will directly proportional to user stay on our app.
So we will learn one of the method to increase the performance of web app that is Code Splitting🔨.

What is Code Splitting in ReactJS?

Code Splitting is a feature which can create bundles that can be dynamically loaded at time. Basically this feature will split bundle into a smaller chunks.

Why we use Code Splitting?

This is very interesting question 👍. Sometimes a single react component (LargeComponent) get very large(large in having many child components) and we don't need all the children at a time😶.

But these child components are still there. When we create a build for a project the complete chunk will be created for LargeComponent.
During the initial load of web page that complete chunk get download for rendering the LargeComponent.

This will increase loading⌛ time of web page.
To overcome this loading time we use Code Splitting. So that on initial load we will only get the code that required at that time 🙂.

As you can see in above image there is a component called LargeComponent which has three child component but on a initial loading we only need Child1 and Child2 but in a bundle there would be a complete chunk for LargeComponent, Child1, Child2 and Child3.

After using Code Splitting the chunk for Child3 would be create separately from LargeComponent, Child1 and Child2.

How to use Code Spitting?

React.lazy😴 function come in the picture to make the component lazy. The React.lazy function lets you render a dynamic import as a regular component

Before:

import Child3 from './Child3';

After:

const Child3 = React.lazy(() => import('./Child3'));

This will automatically load the bundle containing the Child3 when this component is first rendered.

React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.

The lazy component should then be rendered inside a Suspense component, which allows us to show some fallback content (such as a loading indicator) while we’re waiting for the lazy component to load.

import React, { Suspense } from 'react';
import Child1 from './Child1';
import Child2 from './Child2';

const Child3 = React.lazy(() => import('./OtherComponent'));

function ParentComponent() {
  return (
    <div>
      <Child1/>
      <Child2/>
      <Suspense fallback={<div>Loading...</div>}>
        <Child3/>
      </Suspense>
    </div>
  );
}

As you can see in above code Child1 and Child2 components are import directly. But the Child3 component import using React.lazy.

The fallback prop accepts any React elements that you want to render while waiting for the Child3 component to load.

This is the simplest implementation for code-splitting in ReactJS.

Hope🤞🏻 you understand the concept of Code Splitting🙂.