arrow-left Course Hub
Lesson 4: Use React.js to view an account balance
Estimated reading time:

20 mins

Difficulty:

Intermediate

Key takeaway:

Use the useBalance() hook in React to track and monitor XRP account balances in real-time through a responsive UI, without signing transactions or needing wallet ownership.

Lesson 4

Use React.js to view an account balance

React.js and useBalance() for live account data

In the following code sandbox, we start with a simple UI by creating a source wallet component and a destination account component. For demonstration purposes, we need control of the sender wallet, but let’s focus on what’s happening with the destination wallet.

We’ll use useBalance() to send a request to monitor the balance of the destination wallet. Remember, a request doesn’t require signing a transaction, so you can use this hook to check the balance of any account number you know, even if you don’t own the wallet yourself. Try sending XRP from the source wallet to the destination wallet. The useBalance() request will update the balance of the destination wallet once the XRP hits the account!

END OF LESSON

Now that you've learned how to use the useBalance() hook, test your understanding and reinforce your knowledge with a quiz!

What is the purpose of the useBalance() hook in React?
What do you need to use the useBalance() hook?
Which component in the lesson focuses on tracking the destination wallet balance?
What happens when you send XRP from the source wallet to the destination wallet?
Which of the following is true about using the useBalance() hook?