feat:implements-custom-hook-to-force-component-re-render

src/App.js

@@ -1,14 +1,15 @@
 import '@hig/fonts/build/ArtifaktElement.css';
 import './App.css';
 import React, { useEffect, useState } from 'react';
+import { useReRender } from './hooks';
 import NotificationsPanel from '@dynamods/notifications-panel';
 import { EmptyStateArchiver } from './icons';
 import Timestamp from '@hig/timestamp';
 import axios from 'axios';
 
 function App() {
   const [APIData, setAPIData] = useState({ loaded: false, notifications: [], title: 'Notifications', bottomButtonText: 'Mark all as read' });
-  const [componentIsLoaded, setComponentIsLoaded] = useState(false);
+  const forceRender = useReRender();
 
   useEffect(() => {
     if (process.env.NOTIFICATION_URL) {
@@ -53,7 +54,7 @@ function App() {
   };
 
   const notificationChanged = () => {
-    setComponentIsLoaded(prevState=> !prevState);
+    forceRender();
   };
 
   const parseNotifications = (notifications) => {

src/hooks/index.js

@@ -0,0 +1 @@
+export { default as useReRender } from './use-re-render';

src/hooks/use-re-render.js

@@ -0,0 +1,8 @@
+import { useReducer } from 'react';
+//  This custom hook allow us to force component re-render
+const useReRender = () => {
+  const [, reRender] = useReducer((x) => x + 1, 0);
+  return reRender;
+};
+
+export default useReRender;