How to rerender when refs change

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?

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.

useRef vs useState: Should we re-render or not?, Here is a brief answer from the perspective of state and ref. Reconciliation is React's attempt to re-render ONLY the changed diff of the DOM� Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's render method). Try rendering this component inside of a new top-level component which will hold the ref.

useCallback could listen the ref changed

export default function MapboxGLMap() {
    const drawControlRef = useCallback(node => {
      if (node !== null) {
        //fetch(...)   load data
      }
    },[]);

    return(
      <DrawControl ref={drawControlRef }/>
    )
}

Refs and the DOM – React, To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. Although refs are primarily used to access the DOM the useRef hook can also be used to store a mutable variable that will not trigger an update of the component when changed. It will also need a function to set the state to a color, wait for a second, and then set it back to the default value.

You can use a callback function that useEffect base on the change in useRef

   function useEffectOnce(cb) {

        const didRun = useRef(false);
        useEffect(() => {
            if(!didRun.current) {
                cb();
                didRun.current = true
            }
        })
    }

useEffect(effect, [ref.current]) is prematurely re-running � Issue , Refs are for values whose changes don't need to trigger a re-render. If you want to re-run effect when a ref changes, you probably want a� State Versus Refs. Is it possible to ditch state entirely and just use refs? You might be inclined to think you could use refs instead of state for your component and just sidestep all this weird behavior. You can’t. Refs aren’t reactive. When you change a ref, it doesn’t cause a re-render. (Remember, they exist outside of the re-render

How to use React Ref, Learn everything about React refs and JSX's ref attribute with React's useRef Just changing the ref's current value doesn't trigger a re-render. Every time that forceRerender is called, our prop componentKey will change. When this happens, Vue will know that it has to destroy the component and create a new one. What you get is a child component that will re-initialize itself and "reset" it's state. A simple and elegant way to solve our problem!

Refs in React : All you need to know !, If we use refs we can replace the IDs with the a particular ref name is once state changes, you re-render all the components of your UI that� Note: As of React 16, componentWillReceiveProps() is deprecated, meaning if you are using that version or higher in your project, this is not good advice for you. In the React world, forcing a re-render is frowned upon. You should let the DOM take care of itself when React perceives changes to state or props. In order to follow these patterns, we sometimes have to do stuff that seems a little

The same useRef, but it will callback 🤙 - DEV, React refs is a powerful tool, but it had one limitation Tagged with react to, well, ref.current . Keep in mind that useRef doesn't notify you when its content changes. Mutating the .current property doesn't cause a re-render. Creating refs. As I said, refs are escape hatches for React developers, and we should try to avoid using them if possible. When we obtain a node by using a ref and later modify some attribute or the DOM structure of it, it can enter into conflict with React’s diff and update approaches. We’re going to cover anti-patterns later in this article.

Comments
  • Do you need to re-render when ref is updated, or is it enough to use useRef? The way yo do it you do not store the ref in any way. You must either use some hook to store it, a class component, or and object outside the component (for example a store).
  • Thanks for your advice, I tried your code, but it repeats re-render all the time. I need to re-render when ref is updated. I think the callback ref may help me out. But I do not know how to do it
  • Thanks, I use the callback ref to fix my problem.
  • @YangYun, can you reproduce the re-render loop in a codesandbox? I tried, but it does not happen here.