Sometimes, we want to use async/await inside a React functional component with JavaScript.
In this article, we’ll look at how to use async/await inside a React functional component with JavaScript.
How to use async/await inside a React functional component with JavaScript?
To use async/await inside a React functional component with JavaScript, we can define an async function inside the component.
For instance, we write
function Dashboard() {
const [token, setToken] = useState("");
const getToken = async () => {
const headers = {
Authorization: authProps.idToken,
};
const response = await axios.post(
"https://foo.bar/get-token",
{
//...
},
{ headers }
);
const data = await response.json();
setToken(data.access_token);
};
useEffect(() => {
if (!token) {
getToken();
}
}, []);
return <>...</>;
}
to define the getToken
async function in the Dashboard
component.
In it, we call axios.post
to make a post request.
It returns a promise and we get the resolve value of the promise with await
.
Then we call getToken
in the useEffect
callback if token
is falsy.
Conclusion
To use async/await inside a React functional component with JavaScript, we can define an async function inside the component.