Difference of using parentheses () and not when calling function in React

Question

I have a question regarding calling a function in React.

Say I have this code:

function test() {
    console.log("hi");
}

Then I am implementing it like this:

        return (
            <TextField label="Name" name='itemName' value={formValues.itemName} onChange={test} />
    )

If I do it this way: test it will be fine. It will only change when I put something on the field.

But if I do it test() then the function will be triggered right away on every render.

Can someone enlighten me more about these differences? And are there any occassions where I should use the parentheses?

Answer 1

When you write test() you are calling the function on the spot (executing your function).

On the other hand, writing it like this test will pass a pointer to the function that needs to be executed later (onChange in your case).