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.

In this tutorial, 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.

`const [amount, setAmount] = useState('');
const [fromCurrency, setFromCurrency] = useState('USD');
const [toCurrency, setToCurrency] = useState('EUR');`

Here:

• amount stores the value entered.
• setAmount() updates it.
• fromCurrency is the initial currency
• setFromCurrency changes the initial currency
• toCurrency stores the selected currency.
• setToCurrency() changes the selected currency.

Whenever either value changes, React automatically re-renders the component.

Normally, React recalculates everything every time the component renders—even when the calculation doesn’t need to change.

That’s where useMemo comes in.

It remembers (memoizes) the previous calculation and only recalculates when its dependencies change.

For example:

`const memoizedValue = useMemo(() => {
return expensiveCalculation();
}, [dependency]);`

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

These rates represent the value of 1 USD.

I combined everything with useMemo.

`const convertedAmount = useMemo(() => {
const value = Number(amount);
if (amount === '' || !Number.isFinite(value)) return '';
return ((value / RATES[fromCurrency]) * RATES[toCurrency]).toFixed(2);
}, [amount, fromCurrency, toCurrency]);`

• Multiply the amount by the selected RATES.
• Format the result to two decimal places.
• Only recalculate when amount or currency changes.

Building the User Interface

The interface contains:

• A number input.
• A dropdown menu.
• A heading displaying the converted amount.

Example:

`return (
<div className="table-container">
<h1 className="heading">Currency Converter</h1>
<h3 className="converter-title" >{`${fromCurrency} to ${toCurrency} Conversion`}</h3>
<form
className="form"
onSubmit={e => e.preventDefault()}>
<input
type="number"
id="amount"
placeholder="0"
value={amount}
onChange={(e) => setAmount(e.target.value)} />`

 ```<p className="start-paragraph">Start Currency:</p>
    <select className="start-currency"
      value={fromCurrency}
      onChange={(e) => setFromCurrency(e.target.value)} >
     <option>USD</option>
     <option>EUR</option>
     <option>GBP</option>
     <option>JPY</option>
    </select> 

 <p className="start-paragraph">Target Currency:</p>
    <select className="target-currency"
    value={toCurrency}
    onChange={(e) => setToCurrency(e.target.value)} >          
      <option>USD</option>
      <option>EUR</option>
      <option>GBP</option>
      <option>JPY</option>
    </select>  
  </form>
  <p className="result">
  {convertedAmount ? `Converted Amount: ${convertedAmount} ${toCurrency}`: `Converted Amount: 0.00 ${toCurrency}`}
   </p>
</div>);```

Although this project is simple, it teaches several core React concepts:

• Managing state with useState.
• Handling user input.
• Rendering UI dynamically.
• Using useMemo to avoid unnecessary calculations.
• Organizing component logic in a clean, readable way.

Conclusion

Building small projects is one of the fastest ways to become comfortable with React. This currency converter demonstrates how a few hooks can create an interactive, efficient application.

useState gives your components memory, while useMemo helps avoid unnecessary work by recalculating values only when needed.