React input delay handling during onChange event

Question

React input delay handling during onChange event

Upon closer inspection, I've come across an issue that I had not previously noticed. I am unsure if there is a bug within my code or if the onChange function always behaves in this manner, but I am experiencing input delay and am uncertain on how to resolve it. Here is an example to illustrate my point:

https://i.sstatic.net/JOVYU.gif

It is evident that the console only displays the previous state, which is quite inconvenient because it requires the user to click the "Go" button twice in order for it to register the correct state, even if the username and password have been correctly entered.

The code I am working with is relatively simple:

const [state, setState] = useState<LoginStateType>(initialLoginState)
const {username, password} = state

const handleChange = (event: ChangeEventType) => {
    const {name, value} = event.target
    setState({...state, [name]: value})
    console.log(username)
}

{...}

<input type="text" name="username" value={username} onChange={handleChange}/>
<input type="text" name="password" value={password} onChange={handleChange}/>

Any assistance on this matter would be greatly appreciated. Thank you!

typescript input event-handling onchange use-state

Answer 1

Answer №1

When it comes to asynchronous state updates as detailed in this resource.

Incorporating hooks allows for the following solution:

const [currentState, updateState] = useState(/* initial value */)

updateState(/* new value */)

useEffect(() => {
  // currentState is ensured to be correct
}, [currentState])

Answer 2

When it comes to asynchronous state updates as detailed in this resource.

Incorporating hooks allows for the following solution:

const [currentState, updateState] = useState(/* initial value */)

updateState(/* new value */)

useEffect(() => {
  // currentState is ensured to be correct
}, [currentState])

Answer 3

Answer №2

Remember, setState is an asynchronous operation - don't expect to get the new value immediately!

Answer 4

Remember, setState is an asynchronous operation - don't expect to get the new value immediately!

Answer 5

Answer №3

My approach may have been a bit convoluted, but it effectively accomplishes the task at hand. In addition to setting up the necessary state for useContext, I also defined two useRef constants:

const inputUserName = useRef<HTMLInputElement | null>(null)
const inputPassword = useRef<HTMLInputElement | null>(null)

{...}

<input type="text" name="username" ref={inputUserName} value={username} onChange={handleChange}/>
<input type={inputType as string} ref={inputPassword} name="password" value={password} onChange={handleChange}/>

The complete code snippet is outlined below:

  //-------------ADMIN STATE-------------
  const [state, setState] = useState<LoginStateType>(iLoginState)
  const {username, password} = state

  //-------------USE EFFECT-------------
    //UseEffect: this is called when the context is set, I think
  useEffect(() => {
    //dispatch must be called before submit, I think because its an asynchronous call
    dispatch(getAdminsRedux());
        setContext(localStorage.getItem('user'))
        if (context !== null){
          navigate("/admin", {replace: true})
        }

  }, [setContext, context, dispatch, navigate]);

  //-------------HANDLE CHANGE-------------
  const handleChange = (event: ChangeEventType) => {
    const {name, value} = event.target
    setState({...state, [name]: value})
  }

  //-------------HANDLE LOGIN-------------
  const handleLogin = async (event: MouseEvent) => {
    event.preventDefault()

    admins.forEach(async (admin)  => {
      if(admin.username === inputUserName.current!.value){
        const comparedHash = compareHash(inputPassword.current!.value, admin.password)
        if (comparedHash){
          setContext(state.username)
          localStorage.setItem('user', state.username)
        }
      }
    });
  }

Answer 6

My approach may have been a bit convoluted, but it effectively accomplishes the task at hand. In addition to setting up the necessary state for useContext, I also defined two useRef constants:

const inputUserName = useRef<HTMLInputElement | null>(null)
const inputPassword = useRef<HTMLInputElement | null>(null)

{...}

<input type="text" name="username" ref={inputUserName} value={username} onChange={handleChange}/>
<input type={inputType as string} ref={inputPassword} name="password" value={password} onChange={handleChange}/>

The complete code snippet is outlined below:

  //-------------ADMIN STATE-------------
  const [state, setState] = useState<LoginStateType>(iLoginState)
  const {username, password} = state

  //-------------USE EFFECT-------------
    //UseEffect: this is called when the context is set, I think
  useEffect(() => {
    //dispatch must be called before submit, I think because its an asynchronous call
    dispatch(getAdminsRedux());
        setContext(localStorage.getItem('user'))
        if (context !== null){
          navigate("/admin", {replace: true})
        }

  }, [setContext, context, dispatch, navigate]);

  //-------------HANDLE CHANGE-------------
  const handleChange = (event: ChangeEventType) => {
    const {name, value} = event.target
    setState({...state, [name]: value})
  }

  //-------------HANDLE LOGIN-------------
  const handleLogin = async (event: MouseEvent) => {
    event.preventDefault()

    admins.forEach(async (admin)  => {
      if(admin.username === inputUserName.current!.value){
        const comparedHash = compareHash(inputPassword.current!.value, admin.password)
        if (comparedHash){
          setContext(state.username)
          localStorage.setItem('user', state.username)
        }
      }
    });
  }

React input delay handling during onChange event

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to prevent mouse wheel scrolling on a React "number" input field?

Extending a Svelte component with a P5JS class: A step-by-step guide

What is the best way to determine which option is most suitable: types, classes, or function types in TypeScript for

typescript error: Unable to access properties of an undefined value

Improprove the types generated from GraphQL responses

The parameters 'event' and 'event' are not compatible with each other

I am looking to implement custom styles to a navigation bar element upon clicking it

Retrieve the Document ID from Firebase

What is the best way to focus on a particular version of TypeScript?

Encountering an issue with the UNION operator in Typescript causes an error

The protractor tool is unable to recognize an Angular component when it is displayed on the page

What is the best way to retrieve a comprehensive list of all the synthetic event handlers or listeners that have been registered for a

Is it possible that I am making a mistake when using the multi-mixin helper, which is causing an unexpected compiler error that I cannot

What methods are available to restrict the values of properties to specific keys within the current type?

Invoking a controller from another controller in the Express framework using Typescript

Manipulating variables across various methods in TypeScript

Remove a record from Angular 2 Firebase collection

Interface displaying auto-detected car types

Navigating through the keys of a parameter that can assume one of three distinct interfaces in TypeScript: a guide

Transforming dynamic class based on state value from React to TypeScript