0

Ok, I've looked extensively at useState set method not reflecting change immediately and I understand that React.useState variables are async.

This is a problem given that I'm working with a component structured React Native app, and need to set and use a variable immediately upon releasing drag of a component. I am doing this within a callback function of a Draggable from https://github.com/tongyy/react-native-draggable#readme , so the callback hook solution from useState set method not reflecting change immediately won't work.

Here's what I mean. I start with these React.useState

export default function App() {
const [firstColor, setFirstColor] = React.useState('');
const [secondColor, setSecondColor] = React.useState('');

Then I update them based on the position of the Draggable on the OnDragRelease callback function:

<Draggable onDragRelease={(event, gestureState) => { ToggleComboColor1(event, gestureState); ToggleComboPage(); } } onPressIn={() => {setDidDrag1(true);}} />

Here's where there is trouble. I have to set the useState variable based on gestureState, then if both Draggables have been dragged, toggle a result with ToggleComboPage() :

const ToggleComboColor1 = (event, gestureState) => {

      setFirstColor(determineDraggableColor(gestureState.moveX, gestureState.moveY));
      console.log(firstColor); //This does NOT print an updated value
    }

const ToggleComboPage = () =>
    {
      if(didDrag1 && didDrag2)
      {
        console.log(firstColor + " | "+secondColor); //This, consequently, does NOT print an updated value for the most recently dragged 
        // setCurrentColorCombo(
        //   getColorComboItemArray(firstColor, secondColor)[0]
        // );
        // setCurrentKey("Combo");
        // setDidDrag1(false);
        // setDidDrag2(false);
      }
    }

I tried using a plain var to circumvent this, but those are re rendered / re created every time there's a re render.

How can I update and use these variables here?

blue
  • 7,175
  • 16
  • 81
  • 179

0 Answers0