Как можно улучшить этот код?

Question

[bqbq]

import axios from 'axios'
import { FC, useEffect, useState } from 'react'
import './app.scss'

interface Rates {
	RUB: number
	USD: number
	EUR: number
}

interface State {
	data: string
	base: string
	rates: Rates
	timestamp: number
}

export const App: FC = () => {
	const [theme, setTheme] = useState (false)
	const [data, setData] = useState ({
		first: {
			RUB: 0,
			USD: 0,
			EUR: 0,
		},
		second: {
			RUB: 0,
			USD: 0,
			EUR: 0,
		},
		third: {
			RUB: 0,
			USD: 0,
			EUR: 0,
		},
	})
	const [first, setFirst] = useState (0)
	const [second, setSecond] = useState (0)
	const [third, setThird] = useState (0)
	useEffect (() => {
		const fetch = async () => {
			const state = {...data}
			state.first = (await axios.get <State> ('http://localhost:3000/api/v1/first')).data.rates
			state.second = (await axios.get <State> ('http://localhost:3000/api/v1/second')).data.rates
			state.third = (await axios.get <State> ('http://localhost:3000/api/v1/third')).data.rates
			setData (state)
			subscribe ()
		}
		fetch ()
	}, [])
	const subscribe = async () => {
		const state = {...data}
		state.first = (await axios.get <State> ('http://localhost:3000/api/v1/first/poll')).data.rates
		state.second = (await axios.get <State> ('http://localhost:3000/api/v1/second/poll')).data.rates
		state.third = (await axios.get <State> ('http://localhost:3000/api/v1/third/poll')).data.rates
		setData (state)
		await subscribe ()
	}

	useEffect (() => {
		setFirst (Math.min (
			data.first.RUB / data.first.USD,
			data.second.RUB / data.second.USD,
			data.third.RUB / data.third.USD,
		))
		setSecond (Math.min (
			data.first.RUB / data.first.EUR,
			data.second.RUB / data.second.EUR,
			data.third.RUB / data.third.EUR,
		))
		setThird (Math.min (
			data.first.EUR / data.first.USD,
			data.second.EUR / data.second.USD,
			data.third.EUR / data.third.USD,
		))
	}, [data])

	return (
		<div className={theme === false ? 'app' : 'app dark'}>
			<header className="header">
				<h4 className="alternative-theme" onClick={() => {
					setTheme (theme === false ? true : false)
				}}>alternative theme</h4>
			</header>
			<main className="main">
				<table>
					<thead>
						<tr>
							<th>pair name / market</th>
							<th>first</th>
							<th>second</th>
							<th>third</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>rub. / usd</th>
							<td className={first === data.first.RUB / data.first.USD ?
								'active' : ''}>{(data.first.RUB / data.first.USD).toFixed (3)}</td>
							<td className={first === data.second.RUB / data.second.USD ?
								'active' : ''}>{(data.second.RUB / data.second.USD).toFixed (3)}</td>
							<td className={first === data.third.RUB / data.third.USD ?
								'active' : ''}>{(data.third.RUB / data.third.USD).toFixed (3)}</td>
						</tr>
						<tr>
							<th>rub. / eur</th>
							<td className={second === data.first.RUB / data.first.EUR ?
								'active' : ''}>{(data.first.RUB / data.first.EUR).toFixed (3)}</td>
							<td className={second === data.second.RUB / data.second.EUR ?
								'active' : ''}>{(data.second.RUB / data.second.EUR).toFixed (3)}</td>
							<td className={second === data.third.RUB / data.third.EUR ?
								'active' : ''}>{(data.third.RUB / data.third.EUR).toFixed (3)}</td>
						</tr>
						<tr>
							<th>eur / usd</th>
							<td className={third === data.first.EUR / data.first.USD ?
								'active' : ''}>{(data.first.EUR / data.first.USD).toFixed (3)}</td>
							<td className={third === data.second.EUR / data.second.USD ?
								'active' : ''}>{(data.second.EUR / data.second.USD).toFixed (3)}</td>
							<td className={third === data.third.EUR / data.third.USD ?
								'active' : ''}>{(data.third.EUR / data.third.USD).toFixed (3)}</td>
						</tr>
					</tbody>
				</table>
			</main>
		</div>
	)
}

Answer 1

[Aetae]

1. Запросы вместо await по порядку стоит объединить в await Promise.All чтоб сразу все три значения получал, а лучше вообще объединить их на сервере в один запрос.
2. Стоит вместо first, second, third генерировать массив значений, не зависимый от количества(вдруг скоро юани станут важны). Соответственно и табличку строить от этого массива.
3. Вычисляемые вещи типа data.first.RUB / data.first.USD - хранить в переменных, чтоб десять раз не перевычислять. (это мелочи по производительности, но не эстетично)

Comments

[bqbq]

большое спасибо