0

this is my react App component. i am observing display of message 'abra-ca-dabra' twice. why is it twice and not once. AS PER ME since in useState(function) function is called once on initialization and again once for each click on my increment/decrement buttons; i should get display of 'abra-ca-dabra' message once for both initial loading and subsequent clicks on my buttons rather than twice... I AM VERY CONFUSED REGARDING TWICE DISPLAY OF MY MESSAGE...

import React, {useState} from 'react'
import logo from './logo.svg';
import './App.css';
import {Alert, Button} from 'react-bootstrap'

function App() {

const display = () => {console.log("abra-ca-dabra"); return 0}
const[count, setCount] = useState(display())

const increment = () => setCount(count + 1)
const decrement = () => setCount(count - 1)

return (

<div className="App">
<Button variant="info" onClick={increment}>+</Button>
<Alert>{count}</Alert>
<Button variant='warning' onClick={decrement}>-</Button>
</div>

);
}

export default App;
Andy
  • 61,948
  • 13
  • 68
  • 95
Prabhdeep Singh
  • 43
  • 5
  • 1
    [Could be a side-effect of React's Strict Mode](https://stackoverflow.com/questions/61254372/my-react-component-is-rendering-twice-because-of-strict-mode). – Andy Jul 11 '22 at 10:27

1 Answers1

0

You must use arrow function inside onClick, then call your function

<Button variant="info" onClick={() => increment()}>+</Button>
Ferri Adi Prasetya
  • 306
  • 1
  • 7