Trigger update on static browser property change - reactjs

Question

I'd like to trigger updates anytime the Notification.permission browser property changes. However, I'm not sure how to do this since Notification.permission is static.
The following never prints anything to the console, even if I change my browser's notifications permission:
function MyComponent() {
console.log(Notification.permission);
return <MoreGreatStuff />
}

Answer 1

There are diffrent option to check for permission
granted: The user has explicitly granted permission for the current origin to display system notifications.
denied: The user has explicitly denied permission for the current origin to display system notifications.
default: The user decision is unknown; in this case the application will act as if permission was denied.
You must check it like that,
(Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification("Hi there!");
}

Answer 2

Answered my own question with How to listen for web notification permission change
Permission state updates can be hooked via navigator.permissions.query
The gist:
const [permissionState, setPermissionState] = useState()
...
navigator.permissions
.query({ name: 'notifications' })
.then(permission => setPermissionState(permission.state)
Consumers of permissionState will be re-rendered any time it is updated.
This gives you a PermissionState rather than a NotificationPermission, but pish posh it accpmolishes the same thing