React Hooks, how to access mounted parentNode with ReactDom

Question

I am currently migrating my react components to react hooks, but struggle with one specific case which is accessing the mounted DOM element.

My component using React.class structure :

import { Component } from "react";
import ReactDOM from "react-dom";

class LineGraph extends Component {

    componentDidMount() {
        this.element = ReactDOM.findDOMNode(this).parentNode;
    }

    render() {
        return "";
    }
}

Now using react hooks, ReactDOM.findDOMNode(this) throw the following error :

TypeError: react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.findDOMNode(...) is null

Looking at ReactDOM#findDOMNode documentation, I tried to use a references on a returned empty div but after few draw element variable become null.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

export default function LineGraph () {

    let myRef = React.createRef();

    useEffect(() => {
        element = ReactDOM.findDOMNode(myRef.current).parentNode;
    }, []);

    return (
      <div ref={myRef}></div>
    );
}

I am looking a clean way to access the DOM element in which my react code is injected/mounted.

Just for context, my goal is to inject svg content using d3 library, my code works well with components.

Answer 1

The problem is the timing of accessing the reference.

Try using useRef hook with a listener to myRef change, and read it when it has a valid value:

import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

export default function LineGraph() {
  const myRef = useRef();

  useEffect(() => {
    if (myRef.current) {
      console.log(myRef.current.parentNode)
    }
  }, [])

  return <div ref={myRef}></div>;
}