I will answer the second part of your question "Especially how to implement this concept in React?"

I will give an example of implementing multi-tab logout.

Create a file somewhere in your App , I created mine in a folder called Auth and created a file named auth.js

import { BroadcastChannel } from 'broadcast-channel';

const logoutChannel = new BroadcastChannel('logout');

export const login = () => {
    localStorage.setItem("token", "this_is_a_demo_token")
    history.push('/app/dashboard')
}


export const logout = () => {
    logoutChannel.postMessage("Logout")
    localStorage.removeItem("token", 'this_is_a_demo_token' )
    window.location.href = window.location.origin + "/";

}

export const logoutAllTabs = () => {
    logoutChannel.onmessage = () => {
        logout();
        logoutChannel.close();
       
        
    }
}

As you can see, I use this dependency npm i broadcast-channel for simplicity with my React App.

Create an instance called logoutChannel with the name 'logout'. On logging out , the instance sends a post message ('Logout').

Use the logoutAllTabs function in your App.js file as follows

import React, { useEffect } from "react";
import { logoutAllTabs } from "./auth/auth";
import Router from "./routes";


function App() {
useEffect(() => {
 logoutAllTabs()
}, [])

  
  return (
    <>
    
     <Router/> // All routes here
    
    </>
  );
}

export default App;

Kindly follow this tutorials to see the above implementation in action :

1.) https://youtu.be/mb5nuUbvfvM

2.) https://dev.to/demawo/how-to-logout-of-multiple-tabs-react-web-app-2egf