Stop using addEventListener and useRef in React

what if i want onClick on the psuedo elements like .class::after ?

Sound ok to me 🎉❤

This is not bad code 😒... per se. Using useRef does not trigger a DOM tree re-render. There is a valid reason to use useRef to change classes on an element, along with addEventListener: better performance especially when using normal React state changes that trigger a full DOM tree re-render and that tree is huge. It is very clear that you haven't used refs... "in a while"... but I think you haven't needed the use-case for them to be fair. So, rather than first making a video that tells people not to do something, research the valid reasons why people might be doing that something first, and then make sure you mention that in your video when you record it, otherwise people like me will call you out.

You can just access the HTML element by passing the event to the function (e) and say e.currentTarget.classList.toggle('class')

themplate name bro?

Thanks for wasting time

How about changing properties on hover without changing the state any without using use ref?

Хорошее видео, спасибо. Успеха каналу

What to do when we have to attach lets say a keydown or a scroll on the window. and the handler we pass has some stateful data used.
In case we do is in useEffect with empty dependency array it will make a closure with the old values of the state.
How can I tackle that. given that I need to use the same processing multiple places so defining the function in the same effect is not a solution.

Very good, clarified a lot of stuff for me, thank you very much!

Never knew beginners could do that.

'onclick' is considered a bad practice in HTML

You are cool__ :)

I don't like how nobody explains how to do this when you have a list of elements. =/

Thank you Cody

Oh my, pretty good useRef tutorial! It's awesome to see how quickly you recover and explain mistakes you make. Helps from a viewer perspective too! And I can't wait to see the change log on your new house commit :p

Addeventlistener works flawlessly
I guess it's okay to use it if it's not throwing any error

Nooby problem I had recently with useEffect where I was grabbing data from an API and loading it on component render with the useEffect []. I missed up my useState so whenever I try to update the content locally the useState re-renders the component which causes the data to be grabbed again and overwrite my changes. this gave me a headache for few mins trying to see why my state doesn't update 😵.