Detect multiple tabs open in vanilla javascript

<script>

    // Broadcast that you're opening a page.

    localStorage.openpages = Date.now();

    window.addEventListener('storage', function (e) {

        if(e.key == "openpages") {

            // Listen if anybody else is opening the same page!

            localStorage.page_available = Date.now();

        }

        if(e.key == "page_available") {

            alert("One more page already open");

        }

    }, false);

</script>







You might need to read the following steps 2 or 3 times to grab the concept properly.

1. When you open the 1st tab, line # 3 will create a local storage value named “openpages”.
2. Storage listener will NOT be called because the local storage value is updated from this tab.
3. When you open the second tab, line # 3 will also create a local storage value named “openpages”.
4. Storage listener from the 1st tab will be called because the local storage is updated from the 2nd tab.
5. 1st tab will receive the value of “e.key” as “openpages”.
6. So it will create another local storage value “page_available” at line # 7.
7. Now this will call the storage listener from the 2nd tab. Because for the 2nd tab, it is called from the 1st tab.
8. 2nd tab will receive the value of “e.key” as “page_available”, so it will display an alert message.

Ref:  https://adnan-tech.com/detect-multiple-tabs-opened-at-same-time-javascript/

React project best practices and code snippets

React Project Best Practices

Code Snippets

Functional components are far more efficient than class based components. There is also less code that is needed to be written to achieve the same goal. 

Execute code on mount and unmount in functional components

Answer is useEffect hook.

If we pass an empty array as the second argument, it tells useEffect to fire on component load. This is the only time it will fire.

import React, { useEffect } from 'react';

const ComponentExample = () => {

    useEffect(() => {

        // Anything here is fired on component mount

    }, []);

};

If you add a return function inside the useEffect function, it is triggered when a component unmounts from the DOM.

 

const ComponentExample2 = () => {

    useEffect(() => () => {

        // Anything here is fired on component unmount

    }, []);

};

You can use componentDidMount, and componentWillUnmount in the same useEffect function call. Dramatically reducing the amount of code needed to manage both life-cycle events.

const ComponentExample3 = () => {

    useEffect(() => {

        // Anything in here is fired on component mount.

        return () => {

            // Anything in here is fired on component unmount.

        };

    }, []);

};

Now what about the dependency array passed to useEffect? We know from the documentation that:

• It’s optional. If you don’t specify it, the effect runs after each render.
• If it’s empty ([]), the effect runs once, after the initial render.
• It must — or as we’ll see later, should — contain the list of values used in the effect. The effect runs after any of these values changes (and after the initial render).
• The array of dependencies is not passed as argument to the effect function.

The last point is important. It means that the array plays no direct role in ensuring that the effect runs with fresh values (the effect always runs with the value at the time the component is rendered, as we’ve just seen). The array only controls when the effect runs.

Stop user from closing browser Tab/Window

 window.addEventListener('beforeunload', (ev) =>
 {
     ev.preventDefault();
     return ev.returnValue = 'Are you sure you want to close?';
 });

Use Debouncing to handle multiple event fires on any action

Ref - https://blog.logrocket.com/how-and-when-to-debounce-or-throttle-in-react/#:~:text=Its%20usage%20is%20similar%20to,object%20as%20the%20third%20argument.

Why prefer connect over useSelector/useDispatch hook

https://www.samdawson.dev/article/react-redux-use-selector-vs-connect

React Boilerplate

1. Setup VSCode
2. Create new react project
3. Setup package.json
4. Setup Typescript
5. Setup Webpack
6. Setup folder Structure
1. src
1. APIs
2. Assets
3. Components
4. Models
5. Containers/Pages
6. Hooks
7. Redux/store
8. Utils
9. Wrappers (optional)
2. tests
3. configs
7.