IONIC / REACT Line 9:5: Expected an assignment or function call and instead saw an expression @typescript-eslint/no-unused-expressions

Question

When i try to make hook to get userdata from firebase. Like this

import { useEffect, useState } from 'react';
import { firestore } from '../../'
import { getAuth } from 'firebase/auth';
export function useUserDetails() {
  const db = firestore;
  const userid = getAuth().currentUser?.uid
  const [userDetails, setuserDetails] = useState<unknown>([])
  useEffect(() => {
    (async () => {
     const doc = await db.collection("Users").doc(userid).get();
      setuserDetails(({...doc.data(), id: doc.id}))
  })}, [])
  return [userDetails]
}

react return me a error : Line 9:5: Expected an assignment or function call and instead saw an expression @typescript-eslint/no-unused-expressions.

Answer 1

You need to invoke the anonymous function in your useEffect. It looks like you have an extra set of parens in your setuserDetails call. Also, are doc.data() and doc.id both correct?

useEffect(() => {
  (async () => {
    const doc = await db.collection("Users").doc(userid).get();
    // removed parens
    setuserDetails({...doc.data(), id: doc.id}));
  // added parens
  })();
}, []);

Answer 2

Fixed: This is correct way to useEffect

useEffect(() => {
    (async function() {
      const doc = await db.collection("Users").doc(userid).get();
      setuserDetails(({...doc.data(), id: doc.id}))
    })();
}, []);