useCallback onChange always shows previous values

Question

I have 30 inputs

and i want to auto/manual fire httprequests on text change

but somehow useCallback prints previous values

I want to use useCallback as I want to keep same function reference when it is deeply passed to component,and avoids re-renders

    import React, { useState, useCallback } from "react";
    
    export default function App() {
      const [name, setName] = useState("tom");
      const verifyName = useCallback(() => {
        console.log(`HttpRequest for name ${name}`);
      }, [name]);
     
      return (
        <div>
          Name <input value={name} onChange={(e) => {
              setName(e.target.value);
              verifyName();
            }}
          /> 
          <button onClick={verifyName}> check name </button>

        </div>
      );
    }

Rodrigo Amaral · Answer 1 · 2020-08-08T17:00:09.087

1

The problem is in your event listener.

onChange={(e) => {
    setName(e.target.value);
    verifyName();
}}

By the time you call verifyName (which is a side effect), you scheduled a new name with setName, but this operation is asynchronous. As the docs say:

The setState function is used to update the state. It accepts a new state value and enqueues a re-render of the component.

Class components accept a second argument for setState, an update callback that only executes after the state is new. Functional components, however, don't accept that anymore. The React way to do this is to use the useEffect hook:

useEffect(() => {
    console.log(`Http request for name ${name}`);
}, [name]);

EDIT: Demo

edited Aug 08 '20 at 17:00

answered Aug 08 '20 at 04:48

Rodrigo Amaral

1,324
1
13
17

if i move `http` request to `useEffect` then i will loose `useCallback` – vijay Aug 08 '20 at 09:17
You can mix useCallback. BTW, pass an array dependency to useCallback too, otherwise it will recompute everytime. – Rodrigo Amaral Aug 08 '20 at 17:01
Nice try, but this design adds new usecase,Http req fires on page load,And in question it does not fire on page load – vijay Aug 09 '20 at 05:44
You can always create a custom hook to ignore the effect on mount https://stackoverflow.com/q/55075604/6281832 – Rodrigo Amaral Aug 09 '20 at 06:34

vijay · Answer 2 · 2020-08-09T05:16:29.090

Changed

  <input
    value={name}
    onChange={(e) => {
      setName(e.target.value);
      verifyName();
    }}
  />

To

  <input
    value={name}
    onChange={(e) => {
      setName(e.target.value);
      verifyName(e.target.value);
    }}
  />

And

Changed

  const verifyName = useCallback(() => {
    console.log(`Http request for name ${name}`);
  }, [name]);

To

  const verifyName = useCallback((nameToChange) => {
    console.log(`Http request for name ${nameToChange}`);
  }, []);

Explanation

setName which is asynchronus dosen't have second param like setState
if i use useEffect then i loose useCallback
now only option left was to pass new value to dead useCallback verifyName func

useCallback onChange always shows previous values

2 Answers2