react-native validation with useState and useCallback

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?

score 0 · Answer 1 · answered May 31 '22 at 03:24

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])

react-native validation with useState and useCallback

1 Answers1