{"id":4271,"date":"2022-10-13T10:30:33","date_gmt":"2022-10-13T01:30:33","guid":{"rendered":"https:\/\/blog.wsd.sh\/?p=4271"},"modified":"2022-10-13T20:10:57","modified_gmt":"2022-10-13T11:10:57","slug":"react-detect-tab-changes-with-component-side","status":"publish","type":"post","link":"https:\/\/blog.wsd.sh\/?p=4271","title":{"rendered":"<small>React: Detect tab changes with Component side<\/small>"},"content":{"rendered":"<p>1. Purpose<br \/>\n&#8211; Reload data on focus tab change on browser<\/p>\n<p>2. Data load request<br \/>\n&#8211; func.getSpecialReservation(setReservationRows)<br \/>\n&#8211; reload when counter changes<\/p>\n<pre>\r\n    useEffect(() => {\r\n        \/\/ Server request\r\n        func.getSpecialReservation(setReservationRows);\r\n    }, [router.query.counter]);\r\n<\/pre>\n<p>3. Setting the function outside the component<br \/>\n&#8211; addEventListener<\/p>\n<pre>\r\n(function () {\r\n\r\n    window.addEventListener('focus', () => {\r\n        SpecialDialogFunc ();\r\n    });\r\n\r\n})();\r\n<\/pre>\n<p>4. Setting the function inside the component<br \/>\n&#8211; add function<\/p>\n<pre>\r\n    const SpecialDialogFunc = () => {\r\n        func.getSpecialReservation(setReservationRows);\r\n    }\r\n    window.SpecialDialogFunc = SpecialDialogFunc ;\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>1. Purpose &#8211; Reload data on focus tab change on browser 2. Data load request &#8211; func.getSpecialRese&#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/4271"}],"collection":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4271"}],"version-history":[{"count":9,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/4271\/revisions"}],"predecessor-version":[{"id":4273,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/4271\/revisions\/4273"}],"wp:attachment":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}