0

I'm trying to update state after pusher-js's event is updated. In code below even though the log message is printed after event update and show the updated status correctly, but it seems non of two lines before that are not working and no update happens. I mean both test and orderStatus state are not updated even in render function(I mean jsx codes) thanks in advance for those who help me to find out the reason.

  const [orderStatus, setOrderStatus] = useState('approved');

  let test = 'approved';


pusher.subscribe(channel).bind('order.updated', (message: any) => {
    setOrderStatus(message.status);
    test = message.status;
    // the line below is loged in console after order.updated
    console.log('socket message', message.status);
  });

  useEffect(() => {
    console.log('orderState mount', orderStatus, test);
  }, []);

  useEffect(() => {
    switch (orderState) {
      case 'pending':
        setPopup('WFP');
        break;
      case 'approved':
        navigation.navigate('OrderPage', {
          method: transferMethodType,
          type: 'Confirm',
        });
        break;
      case 'deal':
        setPopup('RAN');
        break;
      case 'segmentationSubmitted':
        navigation.navigate('AccountNumbers', { method: transferMethodType });
        break;
      default:
        setPopup(null);
    }
  }, [test, orderStatus]);
Maryam Alishahi
  • 382
  • 1
  • 5
  • 16
  • "orderStatus state are not updated" - What is leading you to believe this? The code you showed doesn't reference `orderStatus`. Please add debugging details to your question. – Andy Ray Aug 27 '23 at 19:51
  • You're confused about how data flow works in React. This exact question is asked several times a day on Stackoverflow. It's a duplicate of [The useState set method is not reflecting a change immediately](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately) – Andy Ray Aug 27 '23 at 23:01
  • `test` will "remain" `"approved"` because your Effect runs only once after the initial render; it then runs `setOrderStatus` and causes one more re-render during which `let test = 'approved'` is re-declared so that's what you see in your logs. Now, for the `orderStatus` I can't reproduce the error? Here's my *close-to-your-code* [codesandbox](https://codesandbox.io/s/stupefied-nash-p9k5mt?file=/src/App.js). – Aleksandar Aug 28 '23 at 00:11
  • You can even see the *eslint warning* suggesting you to use `useRef` Hook if you wanted `test` to preserve its value. I'd posted this as an answer, but I can't understand your issue with `orderStatus` – Aleksandar Aug 28 '23 at 00:14
  • remove the **test variable** and wrap **pusher.subscribe** with **useEffect** with **cleaner** : useEffect(() => { pusher.subscribe(channel).bind('order.updated', (message: any) => { setOrderStatus(message.status); }); return () => pusher.unsubscribe('order.updated'); }, []); **and** useEffect(() => { switch (orderState) { ... }, [orderStatus]); – Christa Aug 28 '23 at 07:20
  • if you want the pusher.subscribe listen continuously to any update you need to put it in root component or in App component and use context or redux to share the orderstatues stored in context or in redux store with childs components – Christa Aug 28 '23 at 08:02

0 Answers0