T
TanStack•3y ago
conscious-sapphire

Getting undefined from fetched data on 1st onChange event from an input, don't know why.

My Hook 
const useFetchAllUsers = () => {
 const {
  data: allUsersData,
  isLoading: allUsersIsLoading,
  isError: allUsersIsError,
 } = useQuery(
  ['allUsers'],
  async () => {
   try {
    const response = await fetch(`/api/users`);
    return response.json();
   } catch (error) {
    throw error;
   }
  },
  { refetchOnMount: 'always' }
 );

 return { allUsersData, allUsersIsLoading, allUsersIsError };
};
const useFetchAllUsers = () => {
 const {
  data: allUsersData,
  isLoading: allUsersIsLoading,
  isError: allUsersIsError,
 } = useQuery(
  ['allUsers'],
  async () => {
   try {
    const response = await fetch(`/api/users`);
    return response.json();
   } catch (error) {
    throw error;
   }
  },
  { refetchOnMount: 'always' }
 );

 return { allUsersData, allUsersIsLoading, allUsersIsError };
};
My Component 
const [search, setSearch] = useState<string>('');
const [tempAllUsersData, setTempAllUsersData] = useState<any>();

const { allUsersData, allUsersIsLoading, allUsersIsError } = useFetchAllUsers();

const handleSearchOnChange = (e: any, allUserData: any) => {
 setTempAllUsersData(allUsersData);
 console.log(tempAllUsersData);
 setSearch(e.target.value);
};

if (allUsersIsLoading) return <LoaderSpinner />;
if (allUsersIsError) return <>Error</>;

return (
 <>
  <input
   placeholder="Search Users"
   type="text"
   value={search}
   onChange={(e) => handleSearchOnChange(e, allUsersData)}     
  />
 </>
)
const [search, setSearch] = useState<string>('');
const [tempAllUsersData, setTempAllUsersData] = useState<any>();

const { allUsersData, allUsersIsLoading, allUsersIsError } = useFetchAllUsers();

const handleSearchOnChange = (e: any, allUserData: any) => {
 setTempAllUsersData(allUsersData);
 console.log(tempAllUsersData);
 setSearch(e.target.value);
};

if (allUsersIsLoading) return <LoaderSpinner />;
if (allUsersIsError) return <>Error</>;

return (
 <>
  <input
   placeholder="Search Users"
   type="text"
   value={search}
   onChange={(e) => handleSearchOnChange(e, allUsersData)}     
  />
 </>
)
The onChange event passes the allUsersData to the handleSearchOnChange function, I set it to the state, and I console log the state to see if the data was set correctly. The 1st onChange event sets the state to an undefined, then afterwards it sets the correct data. I thought isLoading should prevent this from happening.
1 Reply
solid-orange
solid-orange•3y ago
Your issue is not with react-query, but React itself. You should be aware that React state updates aren't immediate (https://blog.logrocket.com/why-react-doesnt-update-state-immediately/#:~:text=State%20updates%20in%20React%20are,components%20in%20a%20single%20pass.), so when you call setTempAllUsersData, tempAllUsersData isn't immediately set to allUsersData, but is still at its initial state: undefined. That's why your console.log is displaying undefined.
Chiamaka Umeh
LogRocket Blog
Why React doesn't update state immediately - LogRocket Blog
When developing React applications, you may have noticed that state updates don’t immediately reflect new values after being changed.

Did you find this page helpful?