Ponowne renderowanie komponentu po zmianach w localStorage - React.js

Czy jeśli np mam w React.js komponent <Header>, który służy do renderowania headera mogę w jakiś sposób ponownie go wyrenderować po zmianach w localStorage? Po pierwszym renderingu ponownie on się nie renderuje, ponieważ nic w nim się nie zmienia. Jednak po tym jak zostanie wpisane coś do localStorage chciałym ponownie go wyrenderować aby dodać pewny element do niego.

localStorage emituje event, gdy coś się zmienia. Wystarczy, że to obsłużysz.

https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event

@tsz: dzięki, ale co w tym evencie należałoby zrobić aby ponownie wybrany komponent wyrenderować?

I czy sessionStorage też coś takiego posiada?

Dodałem w componentDidMount event storage, ale w ogóle on się nie wykonuje przy wpisywaniu czegoś do localStorage. Dodam, że do localStorage wpisuje coś w innym komponencie.

A jak to zaimplementowałeś? Ja właśnie sobie z powodzeniem strzeliłem takim eventem pomiędzy dwoma zakładami z 4P. Dla sessionStorage oczywiście też powinno działać.

@tsz: ale przecież ten event działa tylko w innych otwartych kartach:

The StorageEvent is fired whenever a change is made to the Storage object (note that this event is not fired for sessionStorage changes). This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects.

Coś bajdurzysz :)

Taki kod dodałem w headerze:

class Header extends Component {
  
  componentDidMount() {
    window.addEventListener("storage", this.storageEventHandler);
  }

  storageEventHandler(evt) {
    alert("storage updated");
  }

W innym komponencie do localStorage coś wpisuje po wysłaniu forma, ale alert się nie wyświetla.