React is calling function unexpectedly

Question

Here is my Login component:

const Login = () => {
    const [user, setUser] = useState("");
    const [pass, setPass] = useState("");

    return (
        <div>
            <p>Login</p>
            <input
                type="text"
                onChange={(e) => {
                    setUser(e.target.value);
                }}
            />
            <input
                type="password"
                onChange={(e) => {
                    setPass(e.target.value);
                }}
            />


            <button onClick={submit(user, pass)}>
                Submit
            </button>
        </div>
    );
};

It renders on my webpage, but it calls the submit() function whenever I input to these two: text and password. Looking at my code, I've only set the onClick to call the submit function.

Is there something wrong with my code?

EDIT: Removed classNames for easier viewing

Another option is to turn your `submit` function in to a currying function like so - `const submit = (user, pass) => () => {...}` — lshettyl, Apr 29 '20 at 05:29
Worked for me, but I think I'll be using the () => {...} in the onClick since I'll be confused for having double argument receptors in my function. Thanks btw! — mikaeruu, Apr 29 '20 at 05:38

score 1 · Answer 1 · answered Apr 29 '20 at 05:20

try :

const Login = () => {
    const [user, setUser] = useState("");
    const [pass, setPass] = useState("");

    const onSubmit = () => {
       submit(user,pass)
    }

    return (
        <div>
            <p>Login</p>
            <input
                type="text"
                onChange={(e) => {
                    setUser(e.target.value);
                }}
            />
            <input
                type="password"
                onChange={(e) => {
                    setPass(e.target.value);
                }}
            />


            <button onClick={onSubmit}>
                Submit
            </button>
        </div>
    );
};

gautamits · Accepted Answer · 2020-04-29T05:33:11.457

1

You are calling the submit function on every render. onClick takes a function, but you are directly calling a function.

<button onClick={submit(user, pass)}>
   Submit
</button>

will be replaced by

<button onClick={()=>submit(user, pass)}>
   Submit
</button>

edited Apr 29 '20 at 05:33

answered Apr 29 '20 at 05:24

gautamits

1,262
9
11

[Why shouldn't JSX props use arrow functions or bind?](https://stackoverflow.com/q/36677733/7509065) – Joseph Sible-Reinstate Monica Apr 30 '20 at 19:52
Surely @JosephSible-ReinstateMonica, But performance matters only when you measure it. User did not asked for performance issue. He was having trouble with basic code. He will eventually encounter performance issue down the line and then he will ask about performance. – gautamits Apr 30 '20 at 19:56
But why teach bad habits that we'll have to correct later? Why not teach the right way the first time? It's one extra call to `useCallback`, and the code in the question is already using other hooks, so it's not like it's a new concept altogether. – Joseph Sible-Reinstate Monica Apr 30 '20 at 20:03
That is not bad habit @JosephSible-ReinstateMonica. Premature optimisation is the root of all evil. If inline functions are this bad then react shouldnt have supported them at all. – gautamits Apr 30 '20 at 20:05
I wouldn't call this a premature optimization. And they try to ban it: there's a linter rule called `jsx-no-lambda`. They can't do more than that since they're just a UI library and not the language. – Joseph Sible-Reinstate Monica Apr 30 '20 at 20:08
But that is just a linter rule. Here is what Michael Jackson has to say ```Just bugs me when people lean back in their armchair and go "eh, that code looks like it could be slow to me" w/out measuring anything.``` – gautamits Apr 30 '20 at 20:12

React is calling function unexpectedly

2 Answers2