React functional component state with external callback

Question

I have a functional React component that, among other things, sets up a Bluetooth connection and sets a device variable. It also sets up a callback listener for when Bluetooth responses come in. The listener needs to access device.

export default function App() {
  const [device, setDevice]... ?
  var deviceVar;
  
  const listener = (data) => {
    // needs device
    console.log(device, deviceVar);
    // 'device' is undefined but 'deviceVar' is correct
  }

  const scan = () => {
    setDevice(...);
    device = ...
    addListener(listener)
  }  
}

Using setState is unreliable because the listener is triggered before (i.e.) device was updated.

What is the correct way to handle this? Is there a more functional/hooks approach?

Note that this question is NOT about using useEffect to provide my own callback on device. It is about an 'external' callback that I can't control the timing of.

Can you update your question with more details on how you're connecting your device and how addListener is implemented? Also, device = ... would be an anti-pattern, as you should be using setDevice instead. — John
– John, Commented Sep 2, 2021 at 21:16
Yes, I know device = ... is an anti-pattern, this is what I'm trying to fix — T3db0t
– T3db0t, Commented Sep 3, 2021 at 13:26

udalmik · Accepted Answer · 2021-09-02 21:28:43Z

2

If the problem is race condition on updating the device state, then adding subscription in separate useEffect triggered on device change can help:

export default function App() {

  const [device, setDevice] = useState(null);

  useEffect(() => {
     // called after device is updated in "scan"
     addListener(listener);
  }, [device])
  
  const listener = (data) => {
    // needs device
    console.log(device);
  }

  const scan = () => {
    // update device
    setDevice(...);
  }  
}

answered Sep 2, 2021 at 21:28

udalmik

8,02829 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

T3db0t Over a year ago

The part that's confusing me is that I need to be able to immediately access device in the same function that sets it.

Peril · Accepted Answer · 2021-09-02 22:26:17Z

1

If I understood your problem correctly, I think you can do the following:

export default function App() {

  const listener = (device, data) => {
     console.log(device);
  }

  const scan = () => {
     const device = ...;
     addListener(data => listener(device, data));
  }  
}

answered Sep 2, 2021 at 22:26

Peril

1913 bronze badges

Collectives™ on Stack Overflow

React functional component state with external callback

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related