React How to re-render state hook with useEffect and useCallback?

Question

I apologize for asking this question. I've read many posts on how to re-render the state but I still can't figure it out. I'm too noob :( I can get things to work with useRef, but I'd like to learn how to update state with useEffect and useCallback. My database fetch requires a second click to fire because setState is asynchronous. Neither of my useEffect/useCallback updates state :( useEffect is firing, I'm getting the console log.

export function Form() {
    const[inputKey, setInputKey] = useState("");
    const inputKeyRef = useRef();

    const [keyValid, setKeyValid] = useState(false);
    useEffect(() => {
        console.log("keyValid:", keyValid)
    }, [keyValid])

    const [keyAuthentic, setKeyAuthentic] = useState(false);
    useEffect(() => {
        console.log("keyAuthentic:", keyAuthentic)
    }, [keyAuthentic])

    const updateKeyValid = useCallback(
        () => setKeyValid(true),
        [keyValid, setKeyValid]
    )

    const submit = e => {
        e.preventDefault();
        if ( !inputKeyRef.current.value.length < 12 || !inputKeyRef.current.value.length < 20 ) {
            setKeyValid(true) // not updating state
            updateKeyValid(); // not updating state
        }

        if ( keyValid === true ) { // state not true if keyValid(true)
            db.collection("users").doc(inputKey).get().then((doc) => {
                if (doc.exists) {
                    setKeyAuthentic(true)
                    console.log(doc.data())
                }
            });
        }
    };

    return (
        <div className="form__submit">
            <Button type="submit" onClick={submit}}>Submit</Button>
        </div>
    )
}

export default Form

score 2 · Accepted Answer · answered Sep 17 '21 at 03:50

As you noted, setKeyValid is async, so you won't have access to the new value until the next render.

You effects don't call any setState functions so I'm not sure why you would expect state to be updated inside them.

Also, state shouldn't be deterministic. If you can determine what a value should be on any render based on some other state, then you don't need useState at all. Like:

export function Form() {
  const [keyAuthentic, setKeyAuthentic] = useState(false);
  const [inputKey, setInputKey] = useState("");

  const submit = e => {
      e.preventDefault();
      
      const valid = !inputKey.length < 12 || !inputKey.length < 20;
      if (!valid) return;

      db.collection("users").doc(inputKey).get().then((doc) => {
          if (doc.exists) {
              setKeyAuthentic(true)
              console.log(doc.data())
          }
      });
  };

  return (
      <div className="form__submit">
          <Button type="submit" onClick={submit}}>Submit</Button>
      </div>
  )
}

React How to re-render state hook with useEffect and useCallback?

1 Answers1