How to Rerender When Refs Change
Code: Import Drawcontrol from "React-Mapbox-Gl-Draw"; Export Default Function Mapboxglmap() { Let drawControl = Null Return( {Drawcontrol = Drawcontrol}}/> ) }...
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?
3 Answers
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
useRefdoesn’t notify you when its content changes. Mutating the.currentproperty 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.
useCallback could listen the ref changed
export default function MapboxGLMap() {
const drawControlRef = useCallback(node => {
if (node !== null) {
//fetch(...) load data
}
},[]);
return(
<DrawControl ref={drawControlRef }/>
)
}
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
}
})
}
Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
