[Sugestão] Uso de variáveis ao invés de estados

Olá pessoal, tudo bem?

Fiz o meu código um pouco diferente, pois acredito que isso impacta na performance. Esse exemplo é obviamente pequeno, mas acredito que criando muitos states, o componente acaba renderizando várias vezes sem necessidade. O que acabei fazendo foi criar um state de data e depois variáveis a partir desse state. Dessa forma o componente renderiza só uma vez toda vez que os dados são baixados da API.

Ficou assim:

const ListaRestaurantes = () => {
    const [data, setData] = useState<IPaginacao<IRestaurante>>();
    let restaurantes: IRestaurante[] = data?.results || [];
    let proximaPagina: string = data?.next || "";
    let paginaAnterior: string = data?.previous || "";
    let contadorPaginas: number = data?.count ? Math.floor(data.count / 6) : 0;

    useEffect(() => {
        loadData('http://localhost:8000/api/v1/restaurantes/');
    }, []);

    function loadData(url: string) {
        axios.get<IPaginacao<IRestaurante>>(url)
            .then(resposta => {
                setData(resposta.data);
            })
    }

    return (
        <section className={style.ListaRestaurantes}>
            <h1>Os restaurantes mais <em>bacanas</em>!</h1>
            {
                restaurantes?.map(item => <Restaurante restaurante={item} key={item.id} />)
            }
            {
                (proximaPagina || paginaAnterior) &&
                <div className={style.paginacao}>
                    <button onClick={() => loadData(paginaAnterior)} disabled={!paginaAnterior}>{'< Página anterior'}</button>
                    {[...Array(contadorPaginas)].map((pagina, index) =>
                        <span>{index+1}</span>
                    )}
                    <button onClick={() => loadData(proximaPagina)} disabled={!proximaPagina}>{'Próxima página >'}</button>
                </div>
            }
        </section>
    );
}

export default ListaRestaurantes

Dessa forma a aplicação ganha um pouquinho em performance :)

Ah! Adicionei esses spans, mas são somente para mostrar a quantidade de páginas. Não consegui fazê-los clicáveis, já que não temos acesso a isso direto da API. Teria como, com os dados atuais da API?

(PS.: meu primeiro post por aqui, então desculpem se esse não é o local certo pra esse tipo de conteúdo)