Why does React call a function multiple times?

Question

I have a button that logs a message to the console. However, when the screen initially loads, it randomly prints out the message 4-5 times and when I actually click the button, nothing happens. This also happens with other functions such as window.open() even though I copy and paste code directly. I thought it might be a problem with the useEffect function so I tried adding an empty list as a dependency but that also does not work.

Here is my code:

import { Button, Text } from "@chakra-ui/react";
import React, { useEffect, useState } from "react";
import {useMoralisWeb3Api, useMoralis} from 'react-moralis'; 

function Transactions() {
    const {user, logout} = useMoralis()
    const options = {
        chain: "ropsten",
        address: user.get('ethAddress') 
    }
    const Web3Api = useMoralisWeb3Api()
    const [transactions, setTransations] = useState('Loading...')
    const fetchTransactions = async () => {
        const ethTransactions = await Web3Api.account.getTransactions(options);
        setTransations(ethTransactions); 
    };
    useEffect(() => {
        fetchTransactions(); 
    }, [])
    if (transactions === 'Loading...'){
        return <Text>Loading...</Text>
    } else {
        return <Button onClick={console.log('Hi')}>Click</Button>
    }
}

export default Transactions;

Here is a photo of my console:

Again, nothing happens when I click the button.

Does this answer your question? [React onClick function fires on render](https://stackoverflow.com/questions/33846682/react-onclick-function-fires-on-render) — Henry Woody, May 07 '22 at 20:49

score 1 · Accepted Answer · answered May 07 '22 at 20:47

1

In your button the on click must to be

onClick={()=> console.log("Hi")}

answered May 07 '22 at 20:47

Lautaro Zarandon

292
3
10

1

This worked! Thanks so much! But do you know why we must do this? – user15312648 May 07 '22 at 20:50
Additionally, if I add a console.log(ethTransactions) in the fetchTransactions function, the results still get printed out twice. Why is this the case? – user15312648 May 07 '22 at 20:58
No problem! You need to pass a function for event handling. You have two posibilites. The first is like the comment and the second could be like this -> onClick={callHi}, and for this case you need to make a function like const callHi = () => console.log("Hi"); Could be good you check this documentation https://es.reactjs.org/docs/handling-events.html – Lautaro Zarandon May 07 '22 at 20:59
For the printed twice can you check this answers https://stackoverflow.com/questions/60618844/react-hooks-useeffect-is-called-twice-even-if-an-empty-array-is-used-as-an-ar – Lautaro Zarandon May 07 '22 at 21:09

score 1 · Answer 2 · answered May 07 '22 at 20:55

onClick requires you to pass a function into it. When you pass a function in it, it calls this function 'on click' and passes any related information as arguments to the function you gave.

When you directly pass in console.log('Hi'), this is a function call and not a function itself.

Hence, you wrap this in a function, and then call console.log('Hi') inside the wrapper function:

onClick={()=>console.log('Hi')}

Why does React call a function multiple times?

2 Answers2