title: Component looping over infinitely after updating state
body: <p>I'm trying to update state under a promise. But the component is going over and over again infinitely until it max out the heap size. I don't know what I'm missing here.
  This is my code</p>
  
  <pre><code>import {useDropzone} from 'react-dropzone';
  import File from './File'
  import parser from 'subtitles-parser'
  
  const baseStyle = {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: '20px',
    borderWidth: 2,
    borderRadius: 2,
    borderColor: '#eeeeee',
    borderStyle: 'dashed',
    backgroundColor: '#fafafa',
    color: '#bdbdbd',
    outline: 'none',
    transition: 'border .24s ease-in-out'
  };
  
  const activeStyle = {
    borderColor: '#2196f3'
  };
  
  const acceptStyle = {
    borderColor: '#00e676'
  };
  
  const rejectStyle = {
    borderColor: '#ff1744'
  };
  
  function Drag(props) {
    const {
      getRootProps,
      getInputProps,
      isDragActive,
      isDragAccept,
      isDragReject,
      acceptedFiles
    } = useDropzone();
  
    const style = useMemo(() =&gt; ({
      ...baseStyle,
      ...(isDragActive ? activeStyle : {}),
      ...(isDragAccept ? acceptStyle : {}),
      ...(isDragReject ? rejectStyle : {})
    }), [
      isDragActive,
      isDragReject
    ]);
    const [data, setData] = useState(null)
    if(acceptedFiles.length === 1){
      const  readUploadedFileAsText = (acceptedFiles) =&gt; {
        const temporaryFileReader = new FileReader();      
        return new Promise((resolve, reject) =&gt; {
          temporaryFileReader.onerror = () =&gt; {
            temporaryFileReader.abort();
            reject(new DOMException("Problem parsing input file."));
          };
  
          temporaryFileReader.onload = () =&gt; {
            resolve(parser.fromSrt(temporaryFileReader.result));
          };
          temporaryFileReader.readAsText(acceptedFiles);
        });
      };
      let file = acceptedFiles[0]
      readUploadedFileAsText(file)
      .then(res =&gt; {
        setData({
          data: res
        })
      })
    } 
  
    return (
      &lt;div className="container"&gt;
        &lt;div {...getRootProps({style})}&gt;
          &lt;input {...getInputProps()} /&gt;
          &lt;p&gt;Drag 'n' drop some files here, or click to select files&lt;/p&gt;
        &lt;/div&gt;      
        &lt;File file={data} /&gt;      
        {console.log(data)}
      &lt;/div&gt;
    );
  }
  
  export default Drag
  </code></pre>
  
  <p>Let me know if I have to use any lifecycle methods. I tried using componentDidMount and componentWillReceiveProps but both didn't work for me or I hadn't done them in right way.</p>