Posts

Showing posts from September, 2022

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. When you open the 1 st ...

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 componentWillUn...

React Boilerplate

Setup VSCode Create new react project Setup package.json Setup Typescript Setup Webpack Setup folder Structure src APIs Assets Components Models Containers/Pages Hooks Redux/store Utils Wrappers (optional) tests configs