Jaka jest różnica między wywołaniem metody na onclicka w ten sposób:
<Button onClick={deleteImage(id)}>Usuń</Button>
a w taki sposób:
<Button onClick={() => deleteImage(id)}>Usuń</Button>
W tym pierwszym zapisie metoda od razu wykona się przy renderze komponentu?
Pierwsza funkcja powinna zwracać inną funkcję, która przyjmie argumenty eventu. Stosowane czasami podczas generowania handlerów w Reakcie wewnątrz map().
const deleteImage = (id) => {
return (e) => {
//Todo
} ;
}
Druga to odwrotna konstrukcja, wykonująca deleteImage po evencie.
A czy ta pierwsza funkcja nie wykona się już w momencie renderingu komponentu?
W pierwszym przypadku masz od razu wywołanie funkcji, czy tak, funkcja wykona się w podczas renderowania, ale wynikiem tego wywołania powinna być kolejna funkcja, która będzie podstawiona pod onClick.
Natomiast to, że "powinno", nie znaczy, że tak będzie.
Równie dobrze taki kod
<Button onClick={deleteImage(id)}>Usuń</Button>
Może wynikać z czyjegoś błędu. Załóżmy, że funkcja deleteImage naprawdę kasuje element o danym id. Wtedy dane elementy zostaną po prostu skasowane zanim użytkownik kliknie. Bo może ktoś powinien zrobić to:
<Button onClick={() => deleteImage(id)}>Usuń</Button>
ale z jakichś względów zrobił co innego.
Dlatego ważny jest kontekst (reszta kodu). Bo czasem wydaje nam się, że coś ma sens, a w rzeczywistości nie ma sensu i jest wynikiem błędu (albo odwrotnie - czasem może się wydawać, że programista popełnił błąd, a w rzeczywistości wiedział, co robi).