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 — Henry
– Henry, Commented May 7, 2022 at 20:49

Lautaro Zarandon · Accepted Answer · 2022-05-07 20:47:50Z

1

In your button the on click must to be

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

answered May 7, 2022 at 20:47

Lautaro Zarandon

2903 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user15312648 Over a year ago

This worked! Thanks so much! But do you know why we must do this?

user15312648 Over a year ago

Additionally, if I add a console.log(ethTransactions) in the fetchTransactions function, the results still get printed out twice. Why is this the case?

Lautaro Zarandon Over a year ago

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 es.reactjs.org/docs/handling-events.html

Lautaro Zarandon Over a year ago

For the printed twice can you check this answers stackoverflow.com/questions/60618844/…

Aneesh · Accepted Answer · 2022-05-07 20:55:58Z

1

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')}

answered May 7, 2022 at 20:55

Aneesh

1,7256 silver badges14 bronze badges

Collectives™ on Stack Overflow

Why does React call a function multiple times?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related