How to rerender when refs change

Question

Code:

import DrawControl from "react-mapbox-gl-draw";  export default function MapboxGLMap() {     let drawControl = null     return(       <DrawControl ref={DrawControl => {drawControl = DrawControl}}/>     ) } 

I want to load data when the drawControl not null. I check the document that may use callback ref.

So, how do I listen the drawControl changes and load data?

Answer 1

If you want to trigger a re-render after the ref changes, you must use useState instead of useRef. Only that way can you ensure that the component will re-render. E.g.:

function Component() {   const [ref, setRef] = useState();    return <div ref={newRef => setRef(newRef)} /> } 

As described under useRef documentation:

Keep in mind that useRef doesn’t notify you when its content changes. Mutating the .current property doesn’t cause a re-render. If you want to run some code when React attaches or detaches a ref to a DOM node, you may want to use a callback ref instead.

It may sometimes be better to store whatever value you are getting from the DOM node, as suggested here, instead of storing the node itself.