React and JS closure issue

Question

Background of the problem

I have a simple "Ticker" class that can hold a single callback, and execute that callback each ~1s via setInterval The code is as follows.

class Ticker{
  listner = null;
  
  constructor(){
    setInterval(this.excuteCallbackInterval, 1000)
  }

  addListner(callback){
     this.listner = callback
  }

  excuteCallbackInterval = () => {
    if(this.listner){
       this.listner();
    }else {
      console.log("no listner registered");
    } 
  }
}

I have a React Functional Component in a nother file, that instantiates a Ticker Object, at class level(I.E outside the functional component) but inside the same file. Here's the code for that component. (some parts are removed to make it concise)

.
.
.
const ticker = new Ticker()

// react component.
function TimerDuration({ changingValue }) {

  const unsubscribe = useRef(null)
  

  function runEachSecond() {
    console.log('inside runEachSecond', changingValue)
  }

  useEffect(() => {
    unsubscribe.current = ticker.addListener(runEachSecond)
    // Cleanup
    return () => {
      try {
        unsubscribe.current()
      } catch (err) {
        // Do nothing
      }
    }
   }, [])

  return (
    <Text>
      {changingValue}
    </Text>
  )
}

Problem

My problem is that when the timer TimerDuration renders initially changingValue painted on the screen and changingValue inside excuteCallbackInterval is the same,

But when the changingValue prop is updated, that updated value is not reflected inside excuteCallbackInterval but the change is reflected in the value painted on the screen.

Solution.

My solution was (in a way by instinct) was to store the value of changingValue in a ref and update it inside a second useEffect that runs each time. Might not be the ideal one hence this question.

Question

My question is why am I seeing this behavior? runEachSecond is evaluated with each prop update. And it's able to access changingValue because it's in its parent scope. excuteCallbackInterval function within the Ticker also has access to changingValue because of the closure. But why does the update not reflect within excuteCallbackInterval? Also is there a better way to solve this issue?

ticker.addListener() does not return an unsubscribe function. — Bergi
– Bergi, Commented Mar 26, 2022 at 19:39
Did you expect ticker.addListener(runEachSecond) to be called again when the changingValue prop changes? — Bergi
– Bergi, Commented Mar 26, 2022 at 19:39
@Bergi yes the unsubscribe code is missing. And as for the second question, No just want it to be subscribed after mounting, and unsubscribed when unmounting. — Umendra Rajapakshe
– Umendra Rajapakshe, Commented Mar 26, 2022 at 19:42

Bergi · Accepted Answer · 2022-03-26 19:50:58Z

My question is why am I seeing this behavior? runEachSecond is evaluated with each prop update.

No, it's not updated. In React, all variables stay constant. A new runEachSecond function is created every time the TimerDuration function component is rendered, and that new function would close over the new changingValue parameter.

However, runEachSecond is only used in the effect (in ticker.addListener(runEachSecond)), which runs only once (when the component is mounted). The ticker will store only the first of the many runEachSecond functions, and it will never change (addListener is not called again), and that first function still closes over the first changingValue.

I just want it to be subscribed after mounting, and unsubscribed when unmounting.

In that case, you should store the changingValue in the ref, and then refer to that ref (and its future values) from the ticker listener function. The ref for the unsubscribe function returned by addListener is unnecessary.

function TimerDuration({ changingValue }) {
  const value = useRef(null);
  value.current = changingValue;
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  
  useEffect(() => {
    const unsubscribe = ticker.addListener(function runEachSecond() {
      console.log('inside runEachSecond', value.current);
//                                        ^^^^^^^^^^^^^
    });
    // Cleanup
    return () => {
      try {
        unsubscribe();
      } catch (err) {
        // Do nothing
      }
    }
  }, [])

  return (
    <Text>
      {changingValue}
    </Text>
  )
}

Federkun · Accepted Answer · 2022-03-26 19:49:26Z

You want to unsubscribe and subscribe again every time changingValue change. Or, said in another way: you want to update the ticker's callback to prevent it from going stale.

  useEffect(() => {
    function runEachSecond() {
      console.log('inside runEachSecond', changingValue)
    }

    const unsubscribe = ticker.addListener(runEachSecond)
    // Cleanup
    return () => {
      try {
        unsubscribe()
      } catch (err) {
        // Do nothing
      }
    }
   }, [changingValue]) //  see changingValue in the deps

Why do you need to do this? Right now, your component does something like this:

mount
runEachSecond is created (instance #1)
subscribe to Ticker, pass runEachSecond #1
changingValue prop get update
runEachSecond is created again (instance #2)
Ticker still hold a reference of runEachSecond #1

After adding changingValue in the deps of the useEffect:

mount
runEachSecond is created (instance #1)
subscribe to Ticker, pass runEachSecond #1
changingValue prop get update
runEachSecond is created again (instance #2)
Ticker unsubscribe from runEachSecond #1
Ticker subscribe again, but to runEachSecond #2

Collectives™ on Stack Overflow

React and JS closure issue

Background of the problem

Problem

Solution.

Question

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Background of the problem

Problem

Solution.

Question

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related