#liam-hunt-bonterra_code
jaunty iglooBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1319689931983032341
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- liam-hunt-bonterra_code, 2 days ago, 16 messages
rain crow
Hi, can you add more details here? What does remove and clear mean here?
zealous nexus
Hi, here are some more details:
I set up an update-end callback on elements in my React app like so
const myComponent = () => {
const elements = useElements();
useEffect(() => {
elements?.on('update-end', ...);
}, [elements])
}
I have a useEffect here because elements is of type StripeElements | null and I need to wait until it's non-null to setup the event handler.
If this useEffect runs multiple times, I have two event handlers registered, which is not desired - I want to set up this event handler once.
So I guess I either need a) to be confident this useEffect runs only once, b) to remove the event handler from elements in my useEffect before I create it again
rain crow
Let me grab a teammate who has more expertise with React, hang tight.
crisp herald
👋
Taking a look
The easiest thing to do here is to just check elements in your UseEffect, right?
If it is null then you can set up your handler
If it isn't then you just return
Ideally you don't have unnecessary re-renders
Hmm actually sorry that might not work... that could prevent you from setting up the initial handler here.
One sec, let me think about the best way to handle this.
zealous nexus
(I think that does work but it's equivalent to doing elements?.on() where if elements is null it sets up the handler and otherwise doesn't)
crisp herald
Hmm okay actually stepping back -- if a re-render happens your initial handler is going to be removed.
So why would there be multiple handlers here to begin with?
zealous nexus
I believe that if myComponent re-renders there is no issue because the useEffect won't fire unless elements changes
My concern is: the elements object changes somehow, firing the useEffect a second time, giving us two callbacks
crisp herald
elements will only change if your component re-renders though
It is initialized via const elements = useElements();
zealous nexus
I disagree? A re-render ofMyComponent does not causeelements to change? Or did you mean that elements changes when <Elements> re-renders?
crisp herald
elements is in your dependency array, meaning that the useEffect should run on render or when the value of elements changes.
But elements is initialized via calling useElements() when your MyComponent renders
zealous nexus
`elements` is in your dependency array, meaning that the `useEffect` should run ...
the useEffect should run on render or when the value of elements changes.
I don't believe this is correct. I believe the useEffect runs only when the dependencies change, not on re-render
https://react.dev/reference/react/useEffect#examples-dependencies
crisp herald
It always runs on the initial component render?
zealous nexus
Correct, that's true
crisp herald
That's what I'm saying
So how would this run multiple times?
Like how do you end up with multiple handlers here?
zealous nexus
Sorry, same page. I misunderstood you to mean "re-render" when you said "on render" 👍
Does the value returned by useElements() ever change?
That's the scenario I imagine resulting in multiple handlers
crisp herald
No it can't change unless myComponent renders. Which then serves as the initial render for useEffect()
Since it is initialized via the hook above
zealous nexus
Ok, I think that answers my question.
My mental model was like, the value returned by the useElements() is a black box and may change for no reason at all because of Stripe code while still referring to the same <Elements>