Great to know that useLayoutEffect &useRef go hand in hand 👐
And regarding useRef, may I ask why using getElementById or querySelector is "not an ideal solution in React" (reference: When to use useRef) and how using useRef is different from using them?
Overall it’s more inline with the rest of your react code.
1 problem with getElementById is that you can have multiples of the same ID. So if you have an input component with an ID of “foo”, then that will display on the output multiple times.
Thanks Ruben for the post.
Great to know that
useLayoutEffect&useRefgo hand in hand 👐And regarding
useRef, may I ask why usinggetElementByIdorquerySelectoris "not an ideal solution in React" (reference: When to use useRef) and how usinguseRefis different from using them?Great question.
Overall it’s more inline with the rest of your react code.
1 problem with getElementById is that you can have multiples of the same ID. So if you have an input component with an ID of “foo”, then that will display on the output multiple times.
Great example here.
Another advantage is that you can toss the reference to another component, which helps maintain your unidirectional data flow.
I can clearly see why now 🙂.
Thank you, Ruben 👊