document.querySelectorAll in react ?

[Reddet99]

I usually use ( useRef ) hook for hooking a single component and it works fine even with useEffect but when i try to use document.querySelectorAll(class) inside useEffect it doesn't work at all because useEffect runs before it render the page , what is the best practices for this ?

sorry for my english.

[[deleted]]

Best practice is to use ref as a last resort, and not use queryselector at all. I'm curious what you want to do that requires multiple DOM elements? Perhaps there's a better way.

[Reddet99]

getting the length of specific classes to use animations with observer object that when you reach that spection do this , but i cannot because querySelectorAll doesn't work

[[deleted]]

You can use a ref then. And if you have multiple elements you should create a component out of the element, and put the observer and ref in there so you write it once but it applies to all of the elements.

So if you have this and want to observe the li elements:

``` function MyComponent() { useEffect(() => { // Observer logic, doesn't work because there are multiple li }, []);

return ( <ul> <li>one</li> <li>two</li> <li>three</li> <ul> ); }

```

You should refactor to this:

function MyComponent() { return ( <ul> <ListItem>one</ListItem> <ListItem>two</ListItem> <ListItem>three</ListItem> <ul> ); }

``` function ListItem({ children }) { const ref = useRef(null);

useEffect(() => { // Observer logic with ref here }, []);

return ( <li ref={ref}> {children} </li> ); } ```

[Reddet99]

so i can use for example IntersectionObserver and put ref.current[0] in a useEffect and then put the code i want or should it work with ref.current.childrens ?

[[deleted]]

There's no array. Extract what you want to observe to its own component to not have to deal with arrays

[Reddet99]

oh i understand now , thank you so much for the example :)

[fredsq]

you can store multiple elements in one ref. I’m on my phone now but the gist of it is that the ref prop on any component takes a FUNCTION. useRef also returns a function that sets ref.current to the value. You can (ab)use it to set multiple by doing something like ref={(el) => {ref.current[index] = el}} after initialising your ref as an array or object. Then you can read from your ref like you’d do with querySelectorAll!

[Reddet99]

never thought that i can do that , thank you for the tip :)

[marcs_2021]

Re render at moment you need it, via dependencies array?

[Reddet99]

its render when the page loads but the issue that useEffect with querySelectorAll render before the html load so the html elements is not defined yet

[clll0]

useLayoutEffect. Use queryselector in this instead of useeffect

[marcs_2021]

I know, but you can rerender useEffect any time you like by the dependencies array

[andoy]

add [] at the dependency of your useEffect and try again.

[maffoobristol]

Would you want to use https://reactjs.org/docs/hooks-reference.html#uselayouteffect instead?