React Hooks UseRef issue

Question

I'm trying to use React hooks. I have a problem with this code:

class VideoItem extends Component  {    
  handlePlayingStatus = () => {
    this.seekToPoint();
...
  }

  seekToPoint = () => {
    this.player.seekTo(30); // this worked - seek to f.ex. 30s
  }

  render() {
    const { playingStatus, videoId } = this.state;
    return (
      <Fragment>
        <ReactPlayer
          ref={player => { this.player = player; }}
          url="https://player.vimeo.com/video/318298217"
        />
        <button onClick={this.handlePlayingStatus}>Seek to</button>
      </Fragment>
    );
  }
}

So I want to get ref from the player and use a seek function on that. This works just fine but I have a problem to change it to hooks code.

const VideoItem = () => {    
  const player = useRef();

  const handlePlayingStatus = () => {
    seekToPoint();
...
  }

  const seekToPoint = () => {
    player.seekTo(30); // this does not work
  }

    return (
      <Fragment>
        <ReactPlayer
          ref={player}
          url="https://player.vimeo.com/video/318298217"
        />
        <button onClick={handlePlayingStatus}>Seek to</button>
      </Fragment>
    );
}

How can I remodel it?

Felix Kling · Accepted Answer · 2019-03-06 21:18:39Z

8

From the documentation:

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

Thus your code should be:

player.current.seekTo(30);

(optionally check whether player.current is set)

useCallback might also be interesting to you.

answered Mar 6, 2019 at 21:18

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kk_360 · Accepted Answer · 2019-05-19 13:41:08Z

1

useRef is a hook function that gets assigned to a variable, inputRef, and then attached to an attribute called ref inside the HTML element you want to reference.

Pretty easy right?

React will then give you an object with a property called current.

The value of current is an object that represents the DOM node you’ve selected to reference.

So after using useRef player contains current object, and inside current object, your all methods from vimeo player would be available(in your case seekTo(number))

so you should be using player.current.seekTo(30) instead.

refer this to know more about useRef.

answered May 19, 2019 at 13:41

kk_360

551 bronze badge

Collectives™ on Stack Overflow

React Hooks UseRef issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related