Legal Roger! Gratidão pela explicação! Mas no caso se eu coloco () na função declara eu evoco ela, correto? preciso de passar apenas como ={funcao} e não como ={funcao()}. Mas caso eu queira passar algum parametro para esta funcao (por exemplo, passar como parametro da funcao a mensagem que o console.log vai exibir. Nesse caso eu evoco a funcao sem querer apenas por passar o parametro ={funcao("msg do log")}? Como se faz?
Ótimo vídeo, queria muito entender o que se passa por baixo dos panos. Então é o próprio React que cria os addEventListeners. Obrigado, Roger. Eu só tenho mais uma dúvida, por gentileza: Num dos seus vídeos de JavaScript puro você disse que sempre que possível é bom criar evento (por exemplo, de clique) no elemento pai, pois os eventos borgulham e aí podemos pegar o item pelo target. Você disse que isso é bom pois, no caso de uma aplicação com centenas ou milhares de itens, criar um evento para cada um desses itens pode prejudicar a performance. Faz sentido, desde então eu tenho aplicado isso. Mas e no React? Se eu tiver centenas de itens e precisar que cada item tenha um evento de clique, ainda assim eu terei que usar o onClick? Isso não prejudicará a performance? Ou quando o React percebe que vários filhos têm o mesmo evento ele mesmo “migra” o evento para o parentElement? Obrigado.
O React tem objetos eventos sintéticos, que reproduzem o mesmo comportamento de eventos do DOM (link abaixo). Então sim, a propagação de eventos existe. No caso de centenas de itens, a prioridade deve ser não renderizar centenas de itens, por que isso pode gerar gargalos de performance em qualquer aplicação. Medidas de otimização de performance como useMemo, useCallback e memo são apenas um "bad-aid" no real problema e, devem ser cogitadas apenas se ainda houver lentidão na aplicação após resolver o problema da quantidade de itens renderizados por vez na tela. Veja "React event object" em: react.dev/reference/react-dom/components/common#react-event-object
Legal Roger! Gratidão pela explicação!
Mas no caso se eu coloco () na função declara eu evoco ela, correto? preciso de passar apenas como ={funcao} e não como ={funcao()}. Mas caso eu queira passar algum parametro para esta funcao (por exemplo, passar como parametro da funcao a mensagem que o console.log vai exibir. Nesse caso eu evoco a funcao sem querer apenas por passar o parametro ={funcao("msg do log")}? Como se faz?
onClick={() => suaFuncao(seuArgumento)}
Ótimo vídeo, queria muito entender o que se passa por baixo dos panos. Então é o próprio React que cria os addEventListeners. Obrigado, Roger. Eu só tenho mais uma dúvida, por gentileza: Num dos seus vídeos de JavaScript puro você disse que sempre que possível é bom criar evento (por exemplo, de clique) no elemento pai, pois os eventos borgulham e aí podemos pegar o item pelo target. Você disse que isso é bom pois, no caso de uma aplicação com centenas ou milhares de itens, criar um evento para cada um desses itens pode prejudicar a performance. Faz sentido, desde então eu tenho aplicado isso. Mas e no React? Se eu tiver centenas de itens e precisar que cada item tenha um evento de clique, ainda assim eu terei que usar o onClick? Isso não prejudicará a performance? Ou quando o React percebe que vários filhos têm o mesmo evento ele mesmo “migra” o evento para o parentElement? Obrigado.
O React tem objetos eventos sintéticos, que reproduzem o mesmo comportamento de eventos do DOM (link abaixo). Então sim, a propagação de eventos existe.
No caso de centenas de itens, a prioridade deve ser não renderizar centenas de itens, por que isso pode gerar gargalos de performance em qualquer aplicação.
Medidas de otimização de performance como useMemo, useCallback e memo são apenas um "bad-aid" no real problema e, devem ser cogitadas apenas se ainda houver lentidão na aplicação após resolver o problema da quantidade de itens renderizados por vez na tela.
Veja "React event object" em: react.dev/reference/react-dom/components/common#react-event-object
Top! Muito obrigado pelo link.