Building a Simple Currency Converter in React with useState and useMemo

One of the best ways to learn React is by building small, practical projects. A currency converter is an excellent example because it introduces state management, user input handling, calculations, and performance optimization—all in a single application.

I built a simple currency converter using React that converts from USD to EUR, GBP, and JPY. For simplicity, I used fixed exchange rates instead of calling a live exchange rate API.

React applications are interactive because they can respond to user actions. The useState hook allows components to remember values between renders.

For this project, I declared it as thus,

const [amount, setAmount] = useState(1);
const [currency, setCurrency] = useState("EUR");

The amount stores the value entered.
The setAmount() updates it.
The currency variable stores the selected currency.
The setCurrency() changes the selected currency.
Whenever either value changes, React automatically re-renders the component.

Now, to calculate the conversion, I stored the exchange rate in an object

const RATES =
{
USD: 1,
EUR: 0.92,
GBP: 0.79,
JPY: 157.3
};

The interface contains:
A number input.
A dropdown menu.
A heading displaying the converted amount.

Example:

```return (

Currency Converter

  <input
      type="number"
      value={amount}
      onChange={(e) => setAmount(Number(e.target.value))}
  />

  <select
      value={currency}
      onChange={(e) => setCurrency(e.target.value)}
  >
      <option value="EUR">EUR</option>
      <option value="GBP">GBP</option>
      <option value="JPY">JPY</option>
  </select>

  <h2>
      {amount} USD = {convertedAmount} {currency}
  </h2>

);```