import React,{useState,useEffect} from 'react';

function App() {
  const [image,setImage]= useState<File|null>();
 const [preview,setPreview] = useState<string|null>();
  useEffect(()=>{
    if(image){
      const reader = new FileReader();
      reader.onloadend=()=>{
        setPreview(reader.result as string);
        console.log(reader.result);
      }
      reader.readAsDataURL(image);
    }else{
      setPreview(null);
    }  
  },[image])

  return (
    <div className="App">
    <p>plm in grt{preview}</p>

<input type="file" onChange={
  (event:any|null)=>{

    const file:File|null = event?.target.files[0];
    if(file && file.type.substr(0,5)==="image"){
      setImage(file);

    }else{
      setImage(null);
    }
  }
}/>
    </div>
  );
}

export default App;

The base64 string of the image is stored in the "preview" state. When I upload a very small image(500kb), the preview inside the p tag renders. In the case where I upload a 5mb image, the page transforms to white and nothing happens. What would the issue be. If I wait for one minute, the input button renders, but no string shows up on screen. What would be the cause, I'm guessing, the tag renders before the preview stores the whole base64 string?