0

I have implemented the feature that on clicking the button an alert will come that you have clicked but this alert comes in the very first render. I don't want it like that. I want to start alert when the count will be 1 and forward. Can you guys please help me with this?

import React, { useEffect, useState } from 'react';

function Demo() {
  const [num, setNum] = useState(0)

  const change = () => {
    setNum(num + 1)
  }

  useEffect(() => {
    alert(`item clicked ${num} times`)
  }, [num])

  return(
    <div>
      <h1>{num}</h1>
      <button onClick={change}>Count</button>
    </div>
  )
}

export default Demo;
Improve this question
1

1 Answer 1

Reset to default
0

You could simply check for the num using if-statement.

If num is greater than zero, show alert, otherwise not.

import React, { useEffect, useState } from 'react';

function Demo() {
  const [num, setNum] = useState(0)

  const change = () => {
    setNum(num + 1)
  }

  useEffect(() => {
    if (num > 0) alert(`item clicked ${num} times`)
  }, [num])

  return(
    <div>
      <h1>{num}</h1>
      <button onClick={change}>Count</button>
    </div>
  )
}

export default Demo;
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks for the help. Other than if-condition do you have any other solution? If yes, then please share.
What's wrong with if-condition if I may ask? You could use a ref and check it to bypass first render, but that would be unnecessary in your use-case. A simple if-condition would do.