Solução do fetch utilizando um contexto para vídeos

Olá.

Decidi tirar das páginas a responsabilidade por obter os vídeos e coloquei essa responsabilidade em um contexto de Vídeos, conforme aprendi em aulas e cursos anteriores. Compartilho aqui a solução:

Criei um Video.js com o seguinte código:

import { createContext, useCallback, useContext, useEffect, useState } from "react";

export const VideosContext = createContext();

export function VideosProvider({ children }) {
    const [videos, setVideos] = useState([]);

    return (
        <VideosContext.Provider value={{ videos, setVideos }}>
            {children}
        </VideosContext.Provider>
    )
}

export function useVideosContext() {
    const {videos, setVideos} = useContext(VideosContext);
    const [video, setVideo] = useState({});

    useEffect(() => {
        fetch('https://my-json-server.typicode.com/zingarelli/cinetag-api/videos')
            .then(resp => resp.json())
            .then(data => setVideos(data));
    }, [setVideos])

    const getVideo = useCallback((id) => {
        fetch(`https://my-json-server.typicode.com/zingarelli/cinetag-api/videos/${id}`)
            .then(resp => resp.json())
            .then(data => setVideo({...data}))
        }, []);

    return {videos, video, getVideo}
}

No index.js da PaginaBase, adicionei o provider:

<Container>
    <VideosProvider>
        <FavoritosProvider>
            <Outlet />
        </FavoritosProvider>
    </VideosProvider>
</Container >

E nas páginas de Inicio e Player, chamei o hook customizado:

// index.js da página Inicio
const { videos } = useVideosContext();

// index.js da página Player
const { idVideo } = useParams();
const { video, getVideo } = useVideosContext()

useEffect(() => {
    getVideo(idVideo);
}, [getVideo, idVideo]);

Não gostei muito como ficou a função getVideo e o jeito que eu tive que usá-la na página Player, mas caí em muitos problemas de assincronicidade e, por fim, deixei como está.