-1
  
  const [clientSecret, setClientSecret] = useState<string>();

  useEffect(()=>{
    fetch(`${BASE_URL}/payment/create_stripe_intent`,{
      method:"POST",
      body: JSON.stringify({ payment_amount }),
    })
    .then(async(response)=>{
      const data = await  response.json();

      console.log(data.result.client_secret);

      setClientSecret(data.result.client_secret)
    })
    
  },[]);

The payment intent was created twice as every time my page loading. what issue am facing?

can anyone pls help.

Harish Babu
  • 1
  • 1
    Are you using React 18 with `StrictMode`? If yes, [this](https://stackoverflow.com/questions/72238175/why-useeffect-running-twice-and-how-to-handle-it-well-in-react) might help your answer. – mc-user Dec 28 '22 at 08:51
  • The code itself looks fine. It's likely you have other side effects that cause the component to re-render again. I'd recommend checking answer in this [post](https://stackoverflow.com/questions/60618844/react-hooks-useeffect-is-called-twice-even-if-an-empty-array-is-used-as-an-ar) to identify the possible cause of useEffect being called twice. – yuting Dec 28 '22 at 08:55
  • Does this answer your question? [Why useEffect running twice and how to handle it well in React?](https://stackoverflow.com/questions/72238175/why-useeffect-running-twice-and-how-to-handle-it-well-in-react) – Youssouf Oumar Dec 30 '22 at 14:48

1 Answers1

1

Please check your index.js if it is Strict mode.

enter image description here

If you don't want render twice, you can remove code like this:

index.js

...
const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
    <>
        <App />
    </>
)
MOLLY
  • 409
  • 2
  • 12
  • Thank you, Molly. Now it works fine. But I have a doubt: if I remove React.StrictMode, will it cause any problems in my application? – Harish Babu Dec 29 '22 at 11:43
  • @HarishBabu Hi, Will not cause anything in your project. It's only a tool for highlighting potential problems in an application. You can see it in official introducement. https://reactjs.org/docs/strict-mode.html – MOLLY Dec 30 '22 at 02:55