DEV Community: Haris Ejaz

Simplifying API Error Handling in React Apps

Haris Ejaz — Sat, 15 Jun 2024 09:12:36 +0000

In any modern web application, handling errors gracefully is crucial for providing a smooth user experience. When working with APIs, it's common to encounter various types of errors, such as bad requests, unauthorized access, or server-side issues. In React applications, implementing a robust error handling mechanism can significantly improve usability and user satisfaction.

In this article, we'll explore a common approach to handle API errors in React apps using a reusable HTTP error handler function. We'll discuss how to structure the error handler function, handle different types of errors, and integrate it into your application.

The Problem

Imagine you're building a React application that interacts with a backend API built with Django. The API returns detailed error messages in case of bad requests, with model keys and corresponding error lists. Handling these errors consistently across your application can be challenging and repetitive without a centralized error handling mechanism.

Introducing the HTTP Error Handler

To simplify error handling, we'll create a common HTTP error handler function that encapsulates error handling logic. This function will take care of parsing API responses, extracting relevant error information, and performing appropriate actions based on the error type.

// httpErrorHandler.js

export const httpErrorHandler = ({
  err,            // The error object from the HTTP response
  errorKeys,      // Array of keys to look for in the error response
  setFieldErrors, // Function to set field-specific errors
  context,        // Context for managing authentication state
  onCustomError,  // Optional custom error handling function
}) => {
  // Call the custom error handling function if provided
  onCustomError?.();

  // Define different error cases and their corresponding handlers
  const errorCases = {
    400: () => handleBadRequest(err, errorKeys, setFieldErrors), // Handle bad request errors (400)
    401: () => handleUnauthorized(context),                      // Handle unauthorized errors (401)
    403: () => showErrorToast({                                  // Handle forbidden errors (403)
      title: 'Unauthorized', 
      message: 'Permission denied'
    }),
    404: () => showErrorToast({                                  // Handle not found errors (404)
      title: 'Not Found', 
      message: 'Requested resource not found'
    }),
    500: () => showErrorToast({                                  // Handle internal server errors (500)
      title: 'Server Error', 
      message: 'Internal Server Error'
    }),
    default: () => showErrorToast({                              // Handle any other unspecified errors
      title: 'Error', 
      message: 'Something went wrong'
    }),
  };

  // Determine the error handler based on the error status or use the default handler
  const handleCustomError = errorCases[err?.status] || errorCases.default;
  // Execute the determined error handler
  handleCustomError();
};

// Function to handle bad request errors (400)
const handleBadRequest = (err, errorKeys, setFieldErrors) => {
  // Iterate over the specified error keys
  errorKeys?.forEach(key => {
    // Get the first error message for each key from the error response
    const firstError = err?.data?.[key]?.[0];
    if (firstError) {
      // Set the field-specific error using the provided setFieldErrors function
      setFieldErrors?.[key](firstError);
    }
  });
};

// Function to handle unauthorized errors (401)
const handleUnauthorized = context => {
  // Show an error toast to notify the user about token expiration
  showErrorToast({
    title: 'Error',
    message: 'Token expired. Please login again.',
  });
  // Clear any stored authentication data
  clearStorage();
  // Update the authentication state in the context
  context?.setIsAuthenticated(false);
};

Understanding the Error Handler

Let's break down the components of our HTTP error handler:

httpErrorHandler:
This is the main function responsible for handling different types of errors. It takes an object containing error details, such as the error itself (err), error keys, and context. It also allows for custom error handling through the onCustomError callback.

handleBadRequest: This function specifically handles bad request errors (status code 400). It extracts error messages associated with model keys and updates corresponding form fields with error messages.

handleUnauthorized: This function handles unauthorized errors (status code 401). It displays a toast message to the user, prompts them to re-login, and clears any stored authentication data.

Integrating the Error Handler

To use the HTTP error handler in your React components, import it and invoke it whenever an API call fails:

import { httpErrorHandler } from './httpErrorHandler';

// Inside your API call or wherever you handle errors
try {
  // API call
} catch (error) {
  httpErrorHandler({
    err: error.response,
    errorKeys: ['field1', 'field2'],
    setFieldErrors: setError, // Function to set form field errors
    context: authContext, // Authentication context
    onCustomError: () => console.log('Custom error handling'), // Optional custom error handling
  });
}

Conclusion

By centralizing error handling logic into a reusable HTTP error handler function, you can streamline error management in your React applications. This approach promotes consistency, reduces code duplication, and simplifies maintenance. Whether you're dealing with bad requests, unauthorized access, or server errors, having a robust error handling mechanism is essential for delivering a reliable and user-friendly application.

Implementing Consumable In-App Purchases in React Native for iOS Devices

Haris Ejaz — Thu, 30 May 2024 09:46:37 +0000

In-app purchases (IAP) in React Native require using native code for both iOS and Android because React Native doesn’t have a built-in module for IAP.

Types of In-App Purchases (IAP)

Users can make different types of purchases within a mobile app. While the terms and specific types may vary slightly between iOS and Android, the following types are generally common:

1. Consumable Purchases

Consumable purchases are items that users buy and use up. These include things like virtual currency, extra lives, power-ups, or other virtual goods that can be consumed within the app.

Example: Purchasing virtual coins or gems in a game.

2. Non-Consumable Purchases

Non-consumable purchases are items that users buy once and have permanent access to. These include features or content that don’t get used up.

Accessing a premium feature, eliminating ads, or acquiring additional content like an extra level or chapter in a book app.

3. Auto-Renewable Subscriptions

Auto-renewable subscriptions allow users to access content or features on an ongoing basis. These subscriptions automatically renew at the end of the subscription period unless the user cancels.

Example: Monthly or annual subscription for premium content, access to exclusive features, or an ad-free experience.

Adding consumable purchases to an In-App Purchase (IAP) system involves several steps, and the specifics can vary depending on the platform (iOS, Android) and the tools/libraries you are using. Here are the general steps to implement consumable purchases in a React Native app using (for IOS) the react-native-iap library:

1. Install the library

First, you need to install the library. You can use npm, yarn, or any other node package manager you prefer:

yarn add react-native-iap

npm install react-native-iap

1. Set up In App Purchase Products:

I assume you already have an Apple Developer account and an app created within that account. If you need help setting up an Apple Developer account and creating an app, you can refer to this guide.

Now, click on your app and follow these steps to create an in-app purchase product:

First, scroll to the bottom of the sidebar on your app page and click on In-App Purchases under the Monetization tab:

Next, click the plus icon next to the In-App Purchase Title:

A popup will appear like this::

Select the type consumable and fill in the required information as shown:

Click the save button, and you will be navigated to a screen where you can add more details for this in-app purchase product.

Then, select the availability of this in-app purchase product for different countries:

Next, choose the pricing by clicking the button shown below:

A popup will appear where you can set the pricing according to your needs:

Then, add localization for the in-app purchase product:

A popup will appear like this:

Next, you need to add an image of the app screen where this purchase will occur:

And add review notes and you’re good to go.

That's it for the App Store Connect configuration. You will see this in-app purchase as a draft like below:

2. Configure Xcode For In App Purchase:

Open your project workspace in Xcode.
Select your project and click Signing and Capabilities tab:

Search for In-App Purchase and click on it:

That's it now let's move to the next step.

2. Integrate In App Purchase

import React from 'react';
import { useIAP, requestPurchase, isIosStorekit2, PurchaseError } from 'react-native-iap';

export default function InAppComponent() {
const {
        products,
        currentPurchase,
        finishTransaction,
        getProducts,
        requestPurchase
    } = useIAP();
const [loading, setLoading] = useState(false);

const productSkus = Platform.select({
  ios: ['10_COINS','20_COINS','30_COINS' ],
  android: [],
  default: [],
}) as string[];

useEffect(() => {
    handleGetProducts();
  }, []);

const handleGetProducts = async () => {
    try {
      setLoading(true)
      await getProducts({ skus: productSkus });
    } catch (error) {
      setLoading(false)
      console.log({ message: 'handleGetProducts', error });
    }
  };

 const handleBuyProduct = async (sku: Sku) => {
        try {
            setLoading(true);
            await requestPurchase({ sku });
        } catch (error) {
            handleError(error, 'handleBuyProduct');
        } finally {
            setLoading(false);
        }
    };

const handleError = (error: any, context: string) => {
        console.log(
            'Exception while making Request',
            error,
        );
    };

 useEffect(() => {
     const checkCurrentPurchase = async () => {
            try {
                if (
                    (isIosStorekit2() && currentPurchase?.transactionId) ||
                    currentPurchase?.transactionReceipt
                ) {
                    await finishTransaction({
                        purchase: currentPurchase,
                        isConsumable: true,
                    });
                    onApiCall(currentPurchase);
                }
            } catch (error) {
                handleError(error, 'checkCurrentPurchase');
            }
        };

        checkCurrentPurchase();
    }, [currentPurchase, finishTransaction]);

  const onApiCall = (params: any) => {
       console.log(params,"Call your API Here")
        setLoading(false);
    };

  return (
   <>
{products.map((product, index) => (
                <TouchableOpacity
                    onPress={() => handleBuyProduct(product.productId)}
                    key={index}
                >
                    <Text>
                        {product?.title} for{' '}
                        <Text>
                            {product?.localizedPrice}
                        </Text>
                    </Text>
                </TouchableOpacity>
            ))}
</>
  );
}

Sure, let's walk through the provided React Native code step by step:

Import Statements:
Import the required modules and functions from the react-native-iap library.
Product SKUs Definition:
Define the product SKUs according to the platform, in this case, iOS.

SKU is the ID of the in app product that you've created at the first step.

handleGetProducts Function:
On the initial page render, retrieve all products linked to your Apple Store account. Use these products to establish a connection with the In-App Purchase (IAP) system. Map the retrieved products to display them in your view.
handleBuyProduct Function:
After listing the products, use the handleBuyProduct function to start the purchase process. Pass your unique productId as an argument. Once executed, the handleBuyProduct function will return a response in the currentPurchase variable. This response can then be sent to your API for storage.

To test this IAP integration in the development environment, follow these steps:

Run the app on a real device in debug mode.

Use the Apple account that you've set up as a sandbox account.

Conclusion

In this detailed guide, we explored the realm of in-app purchases in React Native, covering the basics, implementation steps, best practices, and tips for effectively integrating in-app purchase functionality into mobile applications.

References:

Custom Hooks in ReactJS

Haris Ejaz — Wed, 08 Mar 2023 10:02:59 +0000

Custom hooks are functions that encapsulate reusable logic. When the complexity of a react application grows, managing the state and the logic that goes with it can become challenging. This is where custom hooks come in.

They allow you to extract common patterns of stateful logic into reusable functions that can be shared across components. Custom hooks can be used to handle things like form validation, API calls, and more. In this blog, we'll explore the concept of custom hooks in ReactJS and how they can be used to improve your code's reusability and maintainability.

Creating Custom Hooks

To create a custom hook in React, all you need to do is create a function that uses one or more built-in React hooks, such as useState or useEffect. Custom hooks can also call other custom hooks, enabling you to build complex, reusable logic that can be easily shared across components.

Here's an example of a custom hook that uses useState to manage a boolean value:

import { useState } from 'react';

export const useToggle = (initialState) => {
  const [value, setValue] = useState(initialState);
  const toggle = () => setValue(!value);
  return [value, toggle];
};

In this example, the useToggle hook accepts an initial boolean value and returns an array containing the current boolean value and a function to toggle it. Any component that uses this hook can now easily manage a boolean state value by calling the useToggle function.

Using Custom Hooks

Using a custom hook in a component is as simple as calling the function and using the returned values. Here's an example of a component that uses the useToggle hook:

import { useToggle } from './useToggle';

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

  return (
    <div>
      <button onClick={toggle}>{isToggledOn ? 'ON' : 'OFF'}</button>
    </div>
  );
};

In the above example, the MyComponent component imports the useToggle hook and calls it to manage the state of a button's toggle switch. The hook's returned values are destructured into two variables: isToggledOn and toggle. The isToggledOn variable contains the current boolean value, and the toggle function can be used to toggle it.

That was a very basic example. Now let's look into some real coding problem that you might face in one of your projects.

Real Coding Problem

Let's say you have to make an API request to get a list of users and display this list on the client side. Normally what you would do (while using reactJS) is that, Make a component for it and in the useEffect method of this component make this API request and store data in the local state. Just like this:

function App() {
  /* Conventional code to make an api request in a React Component */
  const [data, setData] = useState();
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState('');
  React.useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((json) => {
        setData(json);
        setTimeout(() => {
          setIsLoading(false);
        }, 1000);
      })
      .catch((error) => {
        setError(error?.message);
      });
  });

  return <div className='App'>{/* Show data in whatever way you like */}</div>;
}

export default App;

So what we are doing is that we are making an API request inside the useEffect hook and then we are setting the following state variables:

data : to store the data getting from the API
isLoading : to check if data is loading
error : to store and show error message (if any)

However, if we need to make the same API request elsewhere in our app, we would have to duplicate the above code. This approach is less than ideal, as we would not be able to reuse the same code. To address this issue, we can leverage custom hooks to achieve this. Let's see how this can be done.

Solution Using Custom Hooks

Now let's see how we will address the above problem using a custom hook. First we will create a custom hook named useUserApiRequest:

export const useUserApiRequest = () => {
  return [];
};

Then we will write the code where we will make the API request inside the useEffect hook and use the required state variables like this:

export const useUserApiRequest = () => {
  const [data, setData] = useState();
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState('');
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((json) => {
        setData(json);
        setTimeout(() => {
          setIsLoading(false);
        }, 1000);
      })
      .catch((error) => {
        setError(error?.message);
      });
  });
  return [data, isLoading, error];
};

Now we will see how we can use above custom hook in our app. We will just call this hook like any other hook and it will return three variables that we were using previously to display information to the user.

function App() {
  const [data, isLoading, error] = useUserApiRequest();
  return <div className='App'>{/* Show data in whatever way you like */}</div>;
}

export default App;

If you look closely into the above code, there is no need to repeatedly duplicate the code when making an API request for user data rather we will use the one line where we are using the useUserApiRequest hook get all the required. It's easy to write, understand and reusable at the same time and save us a lot of time.

Benefits of Custom Hooks

Using custom hooks in your React application can bring several benefits, including:

Reusability: Custom hooks enable you to extract common patterns of stateful logic into reusable functions that can be shared across components. This makes it easy to reuse the same logic in multiple components and reduces the amount of code you need to write.

Maintainability: By extracting logic into custom hooks, you can keep your component code clean and focused on the UI. This makes it easier to maintain and debug your code in the long run.

Testability: Custom hooks can be tested independently of your components, making it easier to write unit tests for your application's logic.

Conclusion

Custom hooks are a powerful tool for building reusable and maintainable logic in ReactJS. By extracting common patterns of stateful logic into reusable functions, you can reduce the amount of code you need to write and make it easier to maintain and test your application. Whether you're building a simple or complex React application, custom hooks are an essential tool to have in your toolbox.

Here is the Github repo link of the above used code.

The Power of HOCs in React

Haris Ejaz — Sat, 11 Feb 2023 10:52:59 +0000

The concept of Higher-order components (HOCs) in React was derived from the higher-order functions in JavaScript. HOCs offer a sophisticated method for repeating logic in React components and are a pattern derived from React's compositional nature.

HOCs basically incorporate the DRY(Don't Repeat Yourself) prinicple of software development aimed at reducing repetition of information in a project.

In this article, we'll dive into the intricacies of Higher Order Components (HOCs) in React with practical examples.

JS Higher-Order Functions

Before diving into the technicalities of HOCs in React, Let's first get familiar with Higher-Order Functions in JavaScript.

JavaScript's higher-order functions allow us to manipulate functions, not just values, by taking in one or more functions as arguments and returning a new function. This enables us to write more concise code and abstract over actions.

Higher-order functions help simplify complex logic by breaking it down into smaller parts. By combining these smaller functions, we can create complex behavior. This makes our code easier to understand and reduces the risk of bugs.

Several higher-order functions are already available in JavaScript, such as:

map() => transforms an array by applying a function to all of its elements, and then build a new array from the returned values.
forEach() => goes through each item in an array and does something with it by using another function but doesn't change the original array and returns nothing.
filter() => looks at each item in an array and decides if it meets a specfic condition or not by using a filter method then returns a new array with elements satisfaying that condition.
reduce() => takes an array and combines all the items into a single value by applying a provided function to each element of the array.

There are many other higher-order functions in JavaScript beyond what we have already discussed. Now Let's look into some custom Higher-Order Functions that can be created easily in JavaScript.

Custom Higher-Order Functions

Let's use the following example to grasp the concept of higher-order functions. We have created a higher-order function called prefixerUtilizer, which accepts a string word as an argument and returns a new function that combines prefix with word.

function prefixerUtilizer(prefix) {
  return function (word) {
    return `${prefix}${word}`;
  };
}

const withMoneySign = prefixerUtilizer('$');
const withCompanyName = prefixerUtilizer('Microsoft');
const tenDollars = withMoneySign('9.99');
const companyOneLiner = withCompanyName(
  ' is one of the biggest IT corporation in the world.'
);

console.log(tenDollars);
// $9.99

console.log(companyOneLiner);
// Microsoft is one of the biggest IT corporation in the world.

But in the above example we are creating a higher order function that returns a function. Now Let's see an example where we create a higher order function that accepts a function as an argument.

function higherOrderFunction(func) {
  return function (arg) {
    return func(arg);
  };
}

function add5(num) {
  return num + 5;
}

var add5WithHigherOrder = higherOrderFunction(add5);
console.log(add5WithHigherOrder(3));

In the above example, higherOrderFunction is a higher-order function that takes a function func as an argument and returns a new function that takes an argument arg and returns the result of calling func with arg. We then pass the add5 function as an argument to higherOrderFunction, which returns a new function add5WithHigherOrder that adds 5 to its argument.

Higher Order Components

As we have discussed higher-order functions in depth, let's now move on to our main focus, which is higher-order functions.

A higher-order component (HOC) is an advanced concept which focuses on reusing logic in React components. It involves taking one or more components as inputs and returning a new, enhanced component. HOCs are similar to higher-order functions, which accept functions as arguments and return a new function as we seen above.

HOCs are widely used to create components with shared behavior that cannot be achieved using the normal state-to-props approach.

Some properties of HOCs :

We do not alter or change components, instead, we create new ones.
HOCs are utilized to bring together components for the purpose of code reuse.
HOCs are considered pure functions as they do not have any unintended consequences. They only produce a new component.

These are some real world examples of HOCs:

Package Name	HOC Example
react-redux	`connect(mapStateToProps, mapDispatchToProps)(UserPage)`
react-router	`withRouter(UserPage)`
material-ui	`withStyles(styles)(UserPage)`

Structure of HOCs

It is a component.
It takes another component as an argument.
It returns an entirely new component from the one passed to it.
The component it returns can render the original component that was passed to it.

Enough explanation let's see a HOCs in action.

import React from 'react';

const withLoadingIndicator = (WrappedComponent) => {
  return class extends React.Component {
    render() {
      const { isLoading, ...otherProps } = this.props;
      return isLoading ? (
        <div>Loading...</div>
      ) : (
        <WrappedComponent {...otherProps} />
      );
    }
  };
};

export default withLoadingIndicator;

In this example, the withLoadingIndicator HOC takes a WrappedComponent as its argument and returns a new component that wraps it with a loading indicator. If the isLoading prop is true, it displays a Loading... message, otherwise it renders the original component.

To use this HOC, you simply import it and wrap your component with it:

import React from 'react';
import withLoadingIndicator from './withLoadingIndicator';

class MyComponent extends React.Component {
  ...
  // MyComponent Implementation
}

export default withLoadingIndicator(MyComponent);

Now, the MyComponent component will display a loading indicator when its isLoading prop is true.

In conclusion, Higher Order Components provide a powerful solution for component logic reuse in React. By extending component functionality, HOCs simplify the development process and improve code maintainability. Whether new or experienced, consider incorporating HOCs in your React projects for better results.

If you still have any queries or suggestions, kindly leave a comment. Your input would be greatly appreciated. Thanks!

useEffect a Conceptual Deep Dive

Haris Ejaz — Sat, 04 Feb 2023 14:28:15 +0000

In simplest of words, useEffect is a react hook that allows you to perform side effects in functional components. You can perform a lot of side effects using this hook such as Data fetching, setting up a subscription, manually changing the DOM in React components and many more.

Now we will look closely into useEffect functionality and it's usage.
Consider the following example:

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

function NumberCount() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `Your counter: ${count}`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

In the above example we are simply editing title of our webpage when the NumberCount component is rendered. This showcases how to perform a simple side effect using useEffect hook in a react component.

Now let's see deep dive into this side effect thing.

Side Effects

There are two kinds of side effects in React components: those that require cleanup, and those that don't require cleanup. Let's talk about these distinctions in detail.

Effects With Cleanup

In some cases we might want to run some code when the React has updated the DOM. For instance

Network Requests
Manual Dom Mutations
Logging

When we say these side effects don't require cleanup this means that, when we run them we forget about them immediately.

Let's consider another example:

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

function NumberCount() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // alert the value of count to user
    alert('Count Value: ' + count);
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

So what's actually happening?

We are actually telling React that we want to do something when our component is rendered by using this Hook.
React will remember the effect (the function we have passed) and call it when it updates the DOM.
In this effect we are setting alerting count value whenever we increment that value but we can also perform some kind of data fetching or some imperative API.

Explanation

We are setting a count variable and then we tell react we need to use an effect. Then we pass a function to the useEffect hook. The function we passed is our effect. In our function or effect we display the count value using the alert dialog of web API.

We can read the latest count inside the effect because it’s in the scope of our function. React will remember the effect we used when it renders our component, then run our effect after updating the DOM. This happens for every render, including the first one.

Effects Without Cleanup

Previously we looked on how to express side effects that don't require a cleanup. Now we will look at side effects that require a clean up for instance we might want to set up a subscription to an external data source. In that case we need to clean up that subscription in order to prevent memory leaks.

Let's consider the following example:

Some of you might be thinking that we need a separate effect for canceling the subscription but the code for adding & removing a subscription is so tightly related that useEffect is designed to keep it together. If you return something from your effect, React will run it when it's time to clean up a subscription.

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

function ServerStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    backendAPI.subscribeToServerStatus(props.server.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return function cleanup() {
      backendAPI.unsubscribeFromServerStatus(
        props.server.id,
        handleStatusChange
      );
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

UseEffect Arguments

useEffect hook accept two arguments:

useEffect(callback[, dependencies]);

callback is a function where you'll write your side effects logic.
dependencies is an array of state variables or props. And useffect will call the callback function every time these values are updated between renderings.

Using the dependencies array you can control when to run your side effects and these side effects are written inside the callback function.

We can use this dependency array in three ways:

Not Provided, side Effects run after every re-render

import { useEffect } from 'react';
function FunctionalComponent() {
  useEffect(() => {
    // Runs after EVERY render
  });
}

Empty Array, side Effects run only on the first re-render

import { useEffect } from 'react';
function FunctionalComponent() {
  useEffect(() => {
    // Runs ONCE after initial render
  }, []);
}

Not Provided, side Effects run after every re-render

import { useEffect, useState } from 'react';
function FunctionalComponent({ prop }) {
  const [state, setState] = useState('');
  useEffect(() => {
    // Runs ONCE after initial rendering
    // and after every rendering ONLY IF `prop` or `state` changes
  }, [prop, state]);
}

To compile the above concept let's consider this example:

useEffect(() => {
  document.title = `Your counter: ${count}`;
}, [count]);

So you see we have added count state variable in the dependency array. Whenever the count variable is updated callback function inside the useEffect hook is called. Which means useEffect is not called on every render rather it is called when count state variable is updated.

useEffect & Component Lifecycle

The dependency array of useEffect can be used in a way to replicate some important component lifecycle methods.

ComponentDidMount

As we know ComponentDidMount method is called after a component is mounted. We can use useEffect to replicate this functionality. How? Let's see:

import { useEffect } from 'react';
function Home({ name }) {
  const message = `Its, ${name}!, How you doin?`;
  useEffect(() => {
    // Runs once, after mounting
    document.title = 'Home page';
  }, []);
  return <div>{message}</div>;
}

In the above example we are setting the dependency array empty ,so the callback function will be called once i.e when the component is mounted. In this manner, we can imitate the ComponentDidMount() functionality using the useEffect hook.

ComponentDidUpdate

By adding the state and props in the dependency array we can replicate the ComponentDidUpdate functionality using the useEffect hook. Let's see how we can do this:

import { useEffect } from 'react';
function FunctionalComponent({ prop }) {
  const [state, setState] = useState();
  useEffect(() => {
    // side effect logic where `props` and `state` is used
  }, [prop, state]);
  return <div>Functional Component</div>;
}

So useEffect hook calls the callback once after the component has been mounted and subsequently after any changes to the values in the dependency array [prop, state] have been committed to the DOM. The callback will only be executed if one of the values in the dependencies array has changed.

Important Interview Related Stuff

So what happens, if I set the initial value of a state variable inside the callback function of useEffect?
Will it render the component or not?
Let us consider the following example:

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

function ServerStatus(props) {
  const [value, setValue] = useState(1);

  useEffect(() => {
    setValue(1);
  });

  return <div>{value}</div>;
}

Most of you will be thinking that when we reset the state variable value to 1 inside the callback function, ServerStatus component will render again, but the thing here is that when we mutate the state variable to 1 React compares the prevState value to the passed value in the setState method. As both values are equal it doesn't re-render the component to avoid any wasteful re-renders.

But what happens if we are dealing with non-primitive values?

Consider the following example:

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

function ServerStatus(props) {
  const [value, setValue] = useState({ x: 1 });

  useEffect(() => {
    setValue({ x: 1 });
  });

  return <div>{value}</div>;
}

While considering our pervious observation we can say that the component will not be rendered as we are setting the same value as the prevState value. But if you dive deeper into this you will see ServerStatus component will be rendered infinitely. Now you will be wondering why? Let me explain this to you:

As you know when we compare two objects in javascript even if all the content of these objects are same when we compare them javascript will return false why? Because it store both objects in the memory with different reference and when it compare these objects it will compare reference of these objects and the result will be false. Let's understand this using some coding example:

// this will display false on the screen
console.log({} === {});

Summary

The useEffect(callback, dependencies) hook is used to manage side-effects in functional components. The callback argument is a function that contains the logic for the side-effect, while the dependencies argument is a list of the props or state values that the side-effect depends on.

useEffect(callback, dependencies) invokes the callback function after the initial rendering (mounting) and on subsequent renderings, if any of the values in the dependencies array have changed.

If you still have queries regarding useEffect? Write a comment below!