april breeze

another web programmer

photo gallery

React - ref callback

React Docs - Refs and the DOM

If the ref callback is defined as an inline function, it will get called twice during updates, first with null and then again with the DOM element. This is because a new instance of the function is created with each render, so React needs to clear the old ref and set up the new one. You can avoid this by defining the ref callback as a bound method on the class, but note that it shouldn't matter in most cases.

그러니까, render()안에서,

<div ref={(ref) => { this.ref = ref; }}>

이렇게 하면, 처음 render() 할때는 한 번만 실행되고, 두번째 render() 부터는 두 번 실행됨.

그리고,

<div ref={this.refCallback}>

이렇게 하면 처음 render() 될때 딱 한 번만 실행됨.

comments powered by Disqus