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?