react-native validation with useState and useCallback - react-native

Question

I use useCallback validation for useState value, but that has get value delay.
This is my useState code
const [loading, setLoading] = useState(false);
const [amount, setAmount] = useState('');
const [rate, setRate] = useState('');
const [term, setTerm] = useState('');
const [type, setType] = useState('');
const [title, setTitle] = useState('');
const [canCalc, setCanCalc] = useState(false);
const [bText, setBtext] = useState(styles.defText);
const amountRef = useRef<TextInput | null>(null); //커서 직접이동
const rateRef = useRef<TextInput | null>(null);
const termRef = useRef<TextInput | null>(null);
const typRef = useRef<SelectDropdown | null>(null);
and useState uses inputtext
<TextInput
style={styles.textInput}
onChangeText={(text) =>onchangeAmount(text)}
value={amount}
placeholderTextColor="#666"
importantForAutofill="no"
keyboardType="decimal-pad"
clearButtonMode="while-editing"
returnKeyType="next"
ref={amountRef}
blurOnSubmit={false}
/>
All about useState TextInput same and different value amount, term...
And validation like this:
const onchangeAmount = useCallback(text => {
setAmount(text.trim());
checkValid(amount, rate, term, type,loading);
}, [checkValid]);
const onchangeRate = useCallback(text => {
setRate(text.trim());
checkValid(amount, rate, term, type,loading);
}, [checkValid]);
const onchangeTerm = useCallback(text => {
setTerm( text.trim());
checkValid(amount, rate, term, type);
}, [checkValid]);
const onChangeType = useCallback(text => {
setType(text);
checkValid(amount, rate, term, type,loading);
}, [checkValid]);
function checkValid (amount, rate, term, type,loading){
setLoading(true);
console.log( amount)
console.log( rate)
console.log( term)
console.log( type)
// if (loading) {
// return;
// }
console.log(loading)
//
// const valid=() =>{
// console.log( 'typeof ter========m')
console.log( amount)
console.log( rate)
console.log( term)
// console.log( type.type)
// console.log( type.type !=0)
console.log( !amount )
console.log( !amount && !amount.trim())
//
if (!amount || !amount.trim()) {
return Alert.alert('알림', '이메일을 입력해주세요.');
}
if(
!amount && !amount.trim() &&
!rate && !rate.trim() &&
!term && !term.trim() &&
Object.keys(type).length>0){
console.log("asdfasdfasdfasdf")
setCanCalc(true);
setBtext(styles.actText);
}else{
setCanCalc(false);
setBtext(styles.defText);
}
that validation for change style Pressable grey or blue
<Pressable
onPress={toComplate}
style={canCalc ?
styles.calcActive
:styles.buttonDef
}
disabled={!canCalc}
>
{loading?(
<ActivityIndicator color="white" />
):(
<Text
style={bText}>
calculation
</Text>
)
}
</Pressable>
Why delay get useState value?

Answer 1

Run the validation on an useEffect listening to amount change, that would simplify and make the flow more straight forward. Later on, use the result of the validation to set a different state variable, like the following:
useEffect(() => {
const isValid = runValidations(amount);
setIsValid(isValid)
}, [amount])