Quando carregar o player, ele primeiro mostra a mensagem que não foi encontrada e depois aparece o player, devido ao useEffect carregar após a renderização da página, teria como não acontecer isso? Lembro que quando fiz um curso sobre api externas, havia um await, seria algo relacionado a isso?
hoje, com a Alura e o Google Gemini
Olá Pedro,
Entendo sua dúvida sobre o useEffect e o carregamento do player. Realmente, o useEffect é executado após a renderização da página, o que pode causar esse comportamento indesejado.
Uma possível solução para esse problema seria utilizar uma flag de carregamento, que indica se o player já foi carregado ou não. Dessa forma, é possível exibir uma mensagem de carregamento enquanto o player não estiver pronto para ser exibido.
Quanto à sua pergunta sobre o await, ele é utilizado para aguardar a conclusão de uma operação assíncrona, como a busca de dados em uma API externa. No caso do carregamento do player, não é necessário utilizar o await, pois a operação é síncrona.
Espero ter ajudado a esclarecer sua dúvida sobre o useEffect. Se precisar de mais ajuda, é só perguntar!
Espero ter ajudado e bons estudos!
Desculpe me intrometer, mas eu fiz da seguinte forma.
Logo na inicialização de video na index.js do componente Player inicializei o state dele com objeto vazio {} :
const [video, setVideo] = useState( {} )dessa forma video não será nulo e portanto não renderizará a página NaoEncontrada em:
if (!video) {
return <NotFound />
}na primeira vez que acessar a página antes do useEffect Espero que tenha ajudado.