0

I am having an issue replacing this useEffect+useRef with a useCallback: all code and line of issue.

Also here's a short snippet for my question if you don't want to check all code above:

const gridAreaRef = useCallback((node) => {
  console.log(node);
  console.log(node.querySelector(".ag-center-cols-container"));
  //...
}

  return (
    <div className="ag-theme-alpine" style={{ height: 400 }} ref={gridAreaRef}>

When I console.log(node) I see it on the console. Also when I expand the console logged node as an element in the console, I see all its DOM tree and elements nested in it including one with the class .ag-center-cols-container. However, when I console.log(node.querySelector(".ag-center-cols-container")) I get null!

Actually, the currently used useEffect works in the example above, but doesn't work in the actual project I'm using AgGridReact. It is expected if it doesn't work though, as refs made with useRef are not guaranteed to set on first render. So I read somewhere I need to use useCallback instead, but I get an error because I have the null issue I explained above.

P.S.: Someone in the chat asked why I'm using node.querySelector, I'll explain here as well in case it's someone else's question too: AG Grid makes two "boxes" to display the grid, one that is a container of the grid and wraps it, and another one which are the actual rows. If the grid does not have many rows, the wrapping one will have extra white space around the grid rows. So if I use node itself, those extra white space will be considered too, i.e., clicking on those white space will not cause deselection.

aderchox
  • 3,163
  • 2
  • 28
  • 37
  • you can't completely trust what is displayed in the console when logging objects, as it can only display what is true at the point in time in which you clicked the down arrow in the console. – Kevin B Feb 21 '22 at 16:05
  • @KevinB I don't understand. It's `null` before I click it on the console at all. Can you please explain a bit more what you mean? I'd be grateful if you tell me how to write the `useCallback` so that it works. Thanks. – aderchox Feb 21 '22 at 16:09
  • when you console.log an object, the console's representation of that object may not match what the object was when the console.log happened. It doesn't inspect the object until you expand it. – Kevin B Feb 21 '22 at 16:11
  • @KevinB Ah right, I understand now, great. But I'm sure it's not a console issue because when I use the result, using the variable `gridArea`, to add an event listener, it will give an error like `null does not have addEventListener`, so it's really `null`. – aderchox Feb 21 '22 at 16:17
  • Right, i don't think it's a console issue either, more, i'm pointing out why you're seeing what you are... and potentially why that information isn't necessarily useful to solving your problem. Explain away that oddity and we're left with... it isn't working. – Kevin B Feb 21 '22 at 16:18
  • TLDR your callback is still beign called at a point in time where the element you want doesn't exist. Either find another callback where it does, or write your code such that it can deal with it not existing. (prefer the latter) – Kevin B Feb 21 '22 at 16:20

0 Answers0