How to implement a custom hook for handling browser back button events in React

To implement a custom hook for handling browser back button events in React, you can use the useEffect hook to add an event listener for the popstate event, which is triggered when the user navigates backward or forward in the browser history. Here's a basic example of how to create such a custom hook:

jsxCopy code
import { useEffect } from 'react';

const useHistoryBack = (callback) => {
  useEffect(() => {
    const handleHistoryBack = () => {
      callback();
    };

    window.addEventListener('popstate', handleHistoryBack);

    return () => {
      window.removeEventListener('popstate', handleHistoryBack);
    };
  }, [callback]);
};

export default useHistoryBack;

With this custom hook, you can easily handle browser back button events in your React components. Here's an example of how to use it:

jsxCopy code
import React from 'react';
import useHistoryBack from './useHistoryBack';

const MyComponent = () => {
  useHistoryBack(() => {
    // Handle browser back button event
    console.log('Browser back button pressed');
  });

  return (
    <div>
      <h1>My Component</h1>
      <p>This component handles browser back button events.</p>
    </div>
  );
};

export default MyComponent;

In this example, whenever the user presses the browser's back button while this component is mounted, the callback function passed to useHistoryBack will be invoked. You can replace the console.log statement with any custom logic you want to execute when the back button is pressed.