Using async function, await and resolve in React component

Question

I have a component with the following structure:

const _dbCall = () => {
    const fooDb = SQLite.openDatabase(db);
    return new Promise(resolve => {
        fooDb.transaction(tx => {
            tx.executeSql(`SOME SQL`, [], (tx, results) => {
                resolve(results.rows._array);
            }, null);
        });
    })
}

async function _renderSomething() {
    const results = await _dbCall();
    
    return <FlatList
        data={results}
        renderItem={_renderFunc}
        keyExtractor={item => item} />
}

I use _renderSomething() in the render() function of the Component. However, this gives me:

Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a collection of children, use an array instead.

This {_U, _V, _W, _X} looks like an unresolved promise to me. When I remove the async keyword from renderSomething(), comment the const results = ... and pass some dummy data to <FlatList ..., it renders without a problem.

Why does renderSomething() not return the <FlatList ... but an unresolved promise?

async function always returns a promise. 1. Crate a state with the initial value of an empty array. 2. Pass that empty array to `FlatList`. 3. Fetch the data, update the state. 4. Component will re-render, passing the populated array to the `FlatList` component. — Yousaf, Oct 09 '21 at 09:45

score 0 · Accepted Answer · answered Oct 10 '21 at 11:54

As @Yousaf pointed out:

const [resultsFromDb, setResultsFromDb] = useState([]);

const _dbCall = () => {
    const foo = [];
    const fooDb = SQLite.openDatabase(db);
    fooDb.transaction(tx => {
        tx.executeSql(`SOME SQL`, [], (tx, results) => {
            // do something the results
            for (let i = 0; i < results.rows.length; i++) {
                foo.push(results.rows.item(i));
            }
            setResultsFromDb(foo)
        }, null);
    });
}

const _renderSomething = () => {
    const results = _dbCall();
    
    return <FlatList
        data={resultsFromDb}
        renderItem={_renderFunc}
        keyExtractor={item => item} />
}

Wouldnt this be calling the api/db on every render? – Ajay Gupta Oct 23 '21 at 02:54 — Ajay Gupta, Oct 23 '21 at 02:54

Furkan Zerman · Answer 2 · 2021-10-09T10:15:55.320

-4

You can use in useEffect hook.

function _renderSomething() {
const [data,setData] =  React.useState([])
  React.useEffect(()=>{ 
(async () => {
    const results = await _dbCall();
    setData(results);
  })()
}, []);
    
    return <FlatList
        data={data}
        renderItem={_renderFunc}
        keyExtractor={item => item} />
}

edited Oct 09 '21 at 10:15

answered Oct 09 '21 at 09:56

Furkan Zerman

61
5

This is an anti-pattern. Read https://dev.to/danialdezfouli/what-s-wrong-with-the-async-function-in-useeffect-4jne – Ajay Gupta Oct 09 '21 at 10:02
Thanks. I didn't know that. I am noobie in react native. – Furkan Zerman Oct 09 '21 at 10:14

Using async function, await and resolve in React component

2 Answers2