Olá, sei que é um curso de react, mas fiquei com duvida sobre o uso da arrow function no Onclick na li da componente Tag. Reparei que na primeira vez voce utilizou sem a arrow function e logo depois , fez um corte no video corrigindo para a arrow function. Aqui foi preciso fazer o mesmo pois sem ela não estava funcionando. No entanto, não queria deixar passar batido e entender o pq de ter sido preciso usar a arrow function nessa ocasião.
Fala Luiz, tudo bem? Excelente pergunta!
O uso de arrow functions em manipuladores de eventos como o onClick() no React está relacionado a como o React manipula, monitora e renderiza os estados da aplicação.
Em alguns casos, é comum cometermos o erro de passar uma função que altera um estado da aplicação de forma direta, por exemplo:
import React, {useState} from 'react';
import Modal from '../components/Modal';
export default function App() {
const [modalIsOpen, setIsOpen] = React.useState(false);
return (
<div>
<h1>Hello World!</h1>
<Modal
IsModalOpened={modalIsOpen}
/>
<button onClick={setIsOpen(true)}>Open Modal</button>
</div>
);
}No código acima estamos mudando diretamente o estado do modal, e fazer isso gera um erro do tipo: [Uncaught Error: Too many re-renders].
Isso acontece porque o estado muda imediatamente quando o componente é renderizado, e quando o estado muda o nosso componente será renderizado novamentente e isso acaba gerando um loop infinito.
Esse loop infinito ocorre na linha:
<button onClick={setIsOpen(true)}>Open Modal</button>o setIsOpen() está sendo chamado diretamente logo após o estado de montagem do componente e continua renderizando novamente. Então é preciso usar a arrow function para fazer com que o setIsOpen() seja chamado apenas quando houver um clique, e não ser mais chamado após o estado de montagem do componente.
<button onClick= ={() => setIsOpen(true)} > Abrir Modal </button>Em resumo: Usar arrows functions dentro de manipuladores de eventos no React faz com que evitemos alguns erros envolvendo a montagem e atualização de estados dos nossos componentes.
Este exemplo eu tirei de um artigo muito bom do Medium, e vou deixar aqui embaixo para você ler um pouco mais e ver outros casos de erros comuns ao lidar com manipuladores de eventos no React:
E se quiser saber mais sobre como passar funções para componentes no React, vou deixar também o link da documentação que aborda diversos casos de uso:
Abraços!