оптимизация react кода

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>
    )
}