The order of re-render and useEffect() called

I have component TopPage and ImagePreview and FileUploader

1. At first FileUploader is shown,

2. FileUploader changed the fileObj state of TopPage.

3. then,FileUploader disappeared and ImagePreview appreas, and at the same time useEffect() is called, but at this time, there is no ImagePreviewRef.

When useState is called , both component re-render and useEffect are called.

The order is useEffect -> re-render?

If so, how can I solve this problem?

const TopPage = (props) =>{
    const [fileObj, setFileObj ] = useState();

    useEffect(() =>{
        imagePreviewRef.current.loadPic(fileObj);
    },[fileObj]);

    if (fileObj){
      return <ImagePreview ref={imagePreviewRef}></ImagePreview>
    }
    else {
      return <FileUploader SetFileObj=setFileObj></FileUploader>
    }
}

const FileUploader = (props) => {
   // props.setFileObj() is called here.
}
const ImagePreview = (props) => {
   const loadPic = () =>{// loadpicture to canvas }   
}