How do we know when a React ref.current value has changed? How do we know when a React ref.current value has changed? reactjs reactjs

How do we know when a React ref.current value has changed?


javascript reactjs react-ref

React docs recommend using callback refs to detect ref value changes.

Hooks

export function Comp() {  const onRefChange = useCallback(node => {    if (node === null) {       // DOM node referenced by ref has been unmounted    } else {      // DOM node referenced by ref has changed and exists    }  }, []); // adjust deps  return <h1 ref={onRefChange}>Hey</h1>;}

useCallback is used to prevent double calling of ref callback with null and the element.

You can trigger re-renders on change by storing the current DOM node with useState:

const [domNode, setDomNode] = useState(null);const onRefChange = useCallback(node => {  setDomNode(node); // trigger re-render on changes  // ...}, []);

Class component

export class FooClass extends React.Component {  state = { ref: null, ... };  onRefChange = node => {    // same as Hooks example, re-render on changes    this.setState({ ref: node });  };  render() {    return <h1 ref={this.onRefChange}>Hey</h1>;  }}

Note: useRef doesn't notify of ref changes. Also no luck with React.createRef() / object refs.

Here is a test case, that drops and re-adds a node while triggering onRefChange callback :

Show code snippet