Stateless Componenets from Stateful Components

Hey Everyone,

I have just finished the “slow cute eek” radio button video display part of the course and I’m just genuinely curious how the display can change so fast. I mean the sources are from weblinks yet when I click a new radio button it loads the video in an instant, how can it load up so fast?

const VIDEOS = {
  fast: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-fast.mp4',
  slow: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-slow.mp4',
  cute: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4',
  eek: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-eek.mp4'
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.chooseVideo = this.chooseVideo.bind(this);
    this.state = { src: VIDEOS.fast };
  }

  chooseVideo(newVideo){
    this.setState({
      src: VIDEOS[newVideo]
    });
  }