ViewDidAppear-Like Method For JS/React?

Question

Say, there are two tabs with the same webpage open. On one tab, I make some change in localStorage, then, when I go to the other tab, I'd like to see that change without having to reload the page.

One way that I have thought to do this is by using a setInterval method, but for my application I don't really need to check for updates every 3-5 seconds so I don't feel this approach is ideal.

I am using React. TLDR: Is there a good way to update data as soon as I open the tab of a previously-loaded webpage?

Side Note For iOS Folks: On iOS, there is a viewDidLoad method (which from my understanding is similar to componentDidMount), and there is a viewDidAppear method (so I am basically, asking for the React/JS version of viewDidAppear?)

In regards to the possible duplicate question: To me, it seems fairly different, and this question is more React.js focused.

Does 'making a change' means you're just altering something in the client, or are you also doing some work in the server? if not, then it's impossible (given the current setup) to reflect the changes in the 2nd tab as it's not aware of the 1st tab — Shai, Apr 12 '15 at 06:33
I am making a change to localStorage, which both webpages have access to — GangstaGraham, Apr 12 '15 at 06:33
possible duplicate of [offline, cross-tab communication (javascript-only)](http://stackoverflow.com/questions/19824379/offline-cross-tab-communication-javascript-only) — WiredPrairie, Apr 12 '15 at 12:33
And also: http://stackoverflow.com/a/12186061/95190 should be considered. — WiredPrairie, Apr 12 '15 at 12:35

score 1 · Answer 1 · answered Apr 12 '15 at 06:37

1

You can use jQuery and listen to localStorage on-change events:

 $(window).bind('storage', function (e) {
     console.log(e.originalEvent.key, e.originalEvent.newValue);
 });

This way, once a key in the local storage changes, you can reflect it in the 2nd tab.

If you're using react, then make sure you're rendering a component in your main component's render() function that makes use of you main component's state object. Once local storage has changed, update the state accordingly and react will take care of the rest.

answered Apr 12 '15 at 06:37

Shai

25,159
9
44
67

React: I do currently update state when local storage changes, it works just on the current page though. I'll look into it, I might be doing it the wrong way. JQuery: If I can't get React to work, I will add JQuery to the app (not currently using it), and try that out. – GangstaGraham Apr 12 '15 at 06:41

score 1 · Accepted Answer · answered Apr 12 '15 at 08:28

1

Use the page visibility api or just window's focus event. I recommend having a backup timer set to a minute or so... these events can be finicky.

There's nothing react specific about it other than binding to global events.

answered Apr 12 '15 at 08:28

Brigand

84,529
20
165
173

Thanks a lot! Here, have an imaginary choco chip cookie! I added an event listener for "visibilitychange" to my componentDidMount method – GangstaGraham Apr 12 '15 at 20:12

score 0 · Answer 3 · answered Apr 12 '15 at 20:10

I added the following lines of code to my main component.

In componentDidMount:

document.addEventListener("visibilitychange", this._callbackFunc, false);

In componentWillUnmount:

document.removeEventListener("visibilitychange", this._callbackFunc, false);

ViewDidAppear-Like Method For JS/React?

3 Answers3